javascript動態修改html頁面內容

阿新 • • 發佈：2019-01-12

1：下面是動態刪除頁面內容

效果：

沒刪除前：

刪除後：

我們可以看見段落二被刪除了

javascript程式碼：

function remove()
{
	var p2 = document.getElementById("p2");
	p2.parentNode.removeChild(p2);
}


window.onload = function()
{
	var btn1 = document.getElementById("btn1");
	btn1.onclick = remove;
}

html程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>testdelete</title>
	
	    <script type="text/javascript" src="js/delete.js">

	    </script>
	</head>
	<body>
        <p id="p1">我是段落一</p>
        <p id="p2">我是段落二</p>
        <p id="p3">我是段落三</p>
        <p id="p4">我是段落四</p>
        <p id="p5">我是段落五</p>
        
        <input type="button"  id="btn1" value="點選刪除段落"/>
	</body>
</html>

2：動態增加頁面內容和刪除頁面內容

點選增加後：

點選刪除後：

html程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<script type="text/javascript" src="js/add.js">
        </script>
	</head>
	<body>
       
       <input type="file"  id="f1"/>     
       <input type="button" id="btn1" value="新增一個上傳域"/>
      
	</body>
</html>

js程式碼：

function add()
{
    var  f1 = document.getElementById("f1");
    var  parent = f1.parentNode;
    var  newf = document.createElement("input");
    newf.setAttribute("type","file");
    var  br1 = document.createElement("br");
    var  br2 = document.createElement("br");
    var  btn = document.createElement("input");
    btn.setAttribute("type","button");
    btn.setAttribute("value","刪除上傳域");
    btn.onclick = remove;
    parent.insertBefore(newf,f1);
    parent.insertBefore(btn,f1);
    parent.insertBefore(br1,f1);
    parent.insertBefore(br2,f1);
}

function remove()
{
    var  a = document.getElementsByTagName("input");
    
    var  b = document.getElementsByTagName("br");
    if(b.length>0)
    {
       b[0].parentNode.removeChild(b[0]);
    }
   
    
    for(var i = 0;i<a.length;i++)
    {
    	if(a[i].type="file")
    	{
    		a[i].parentNode.removeChild(a[i]);
    		break;
    	}
    }
    a = document.getElementsByTagName("input");
    for(var i = 0;i<a.length;i++)
    {
    	if(a[i].type="button")
    	{
    		a[i].parentNode.removeChild(a[i]);
    		break;
    	}
    }
}

window.onload = function()
{
	var btn1 = document.getElementById("btn1");
	btn1.onclick = add;
}

javascript動態修改html頁面內容

1：下面是動態刪除頁面內容效果：沒刪除前：刪除後：我們可以看見段落二被刪除了 javascript程式碼： function remove() { var p2 = document.get

JavaScript動態修改html組件form的action屬性

jsp頁面 check javascrip user validate -h jsp ida == 用javaScript動態修改html組件form的action屬性，可以在提交時再決定處理表單的頁面。 <%--JavaScript部分--%><sc

ThinkPHP定時ajax獲取後臺資料，使用javascript動態修改前端頁面的表格來顯示資料

廢話少說，直接上程式碼： <!DOCTYPE html> <html> <head> <title>ThinkPHP定時ajax獲取後臺資料</title> <meta http-equ

使用JavaScript動態刷新頁面局部內容

start mapping ood arch random rand ros servlet asc html頁面： <[email protected]/* */ contentType="text/html; charset=Shift_JIS"%&g

動態獲取html頁面的內容，而且取當中的某塊元素的方法

var mod .ajax pos spa app sync lte index ??$.ajax({ url: "http://192.168.1.59:8888/app-tpl-webapp/tpl/design.html", async:f

python抓取javascript動態生成HTML內容的實踐

本實驗在Ubuntu14.04上完成。使用的瀏覽器是火狐(Firefox 33.0)，python版本是2.7.6。大家都知道用urllib配合正則表示式抓取靜態HTML的內容很方便，但是如果網頁中有javascript動態生成的內容，urllib就無能為力了。此時我們

javascript 動態修改css樣式

csdn 知識 net posit name 知識點顯示 span 部分方法一：改變外聯css文件，這裏不講這個。方法二：通過改變claaName來改變樣式，語法： obj.className = "style2"; //或者 obj.setAttribute(

javascript 動態修改css樣式方法匯總(四種方法)

tool geb code 標簽 AD java border nlog tro 在很多情況下，都需要對網頁上元素的樣式進行動態的修改。在JavaScript中提供幾種方式動態的修改樣式，下面將介紹方法的使用、效果、以及缺陷。 1、使用obj.className來修改樣

mustache 模板，用於構造html頁面內容

index als syntax mustache number fin script physics com Mustache 的模板語法很簡單，就那麽幾個： {{data}} {{#data}} {{/data}} {{^data}} {{/data}} {{.}}

Python 爬取網頁中JavaScript動態添加的內容（二）

python tab sta exe div int rom ava script 使用 selenium + phantomjs 實現 1、準備環境 selenium（一個用於web應用程測試的工具）安裝：pip install seleniumphantomjs（是

HTML中容器（div）動態載入HTML頁面的方法

在學習前端相關知識的時候，遇到了div中如何動態切換頁面的問題，經過網路上的搜尋，發現了一個不錯的方法。使用JavaScript程式碼替換div內容 <script> function load_home() { document.getE

使用phpQuery 抓取HTML 頁面內容

phpQuery 使用phpQuery 可以對HTML 頁面進行類似於JQuery 一樣的操作。目的是進行HTML 資料的抓取，以及對HTML 檔案內容的補充等操作，完全就類似於jQuery 一樣的操作。 <?php require_once ".

用錨點進行HTML頁面內容的跳轉

介紹我們知道，JavaScript可以實現HTML頁面上非常豐富的事件和動作，比如說點選工具欄某個按鈕時，顯示相應特定的內容並隱藏其他。但在有些Web應用部署的實際情況中，會禁用除了HTML之外的其他程式碼，比如JavaScript和CSS。那如何實現類似的效果呢？經過

Request.Form獲取HTML頁面內容

在.aspx頁面中使用html的<form>標籤，將整個頁面的內容送至action屬性所指向的url，注意method屬性為post。注意Request.Form是接受post方法的物件。例如：在Name.aspx中的前臺程式碼： <form a

javascript動態插入html元素

主要有是兩種方案： 1.使用DOM //使用createElement建立元素 var dialog = document.createElement('div'); var img = document.createElem

前段在指定DIV區域載入新的HTML頁面內容

兩種方法： 1 通過標籤的形式： <div class="main-content"> <！--src 為要載入的頁面--> <iframe src="index-demon.html" width="1480p

HTML頁面內容禁止選擇、複製、右鍵

<body leftmargin=0 topmargin=0 oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onselect='docume

html頁面內容的收縮和展開效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h

react-navigation之動態修改title的內容

效果圖：動態修改title內容： static navigationOptions = { title: ({ state }) => `Chat with ${s

javascript 動態修改css樣式方法

CSS ? 1 2 3 4 5 6 7 .style1{margin:10px auto ;background-color:#9999FF; display

javascript動態修改html頁面內容

相關推薦