HTML DOM新增資訊

阿新 • • 發佈：2018-12-21

dom節點新增資訊，點選按鈕錄入一條資訊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box{width: 800px;margin: 30px auto;}
        table{width: 500px;border:1px solid #ddd;border-collapse: collapse 
; margin: 30px auto}
        tr th,tr td{line-height: 35px;border: 1px solid #ddd;text-align: center;}
    </style>
</head>
<body>
    <div id="box">
        編號：<input id="txt1" type="text">
        姓名：<input id="txt2" type="text">
        住址：<input id="txt3" type 
="text">
        <button id="btn">新增</button>
    </div>
    <script type="text/javascript">
        var tab=document.createElement('table');
        tab.createCaption().innerHTML="學生調查表";

        var tr=createTH();//獲取一行
        tab.appendChild(tr);//把行放在表格中

        //獲取按鈕
        var 
 btn=document.getElementById('btn');
        //獲取三個輸入框節點。
        var txt1=document.getElementById('txt1');
        var txt2=document.getElementById('txt2');
        var txt3=document.getElementById('txt3');

        //滑鼠點選事件
        btn.onclick=function(){
            //取出輸入框裡面的值
            var v1=txt1.value;
            var v2=txt2.value;
            var v3=txt3.value;
            // alert(v1,v2,v3);
            if(v1==''||v2==''||v3==''){
                alert("請把資訊填寫完整");
                return;//如果輸入框裡面沒內容,內容為空, 則結束函式。下面的程式碼不執行
            }
            //把獲取的輸入框值傳給表格作為內容顯示
            var tr=createTD(v1,v2,v3);
            //把行新增到表格中
            tab.appendChild(tr);

            //把表格新增到body中
            document.body.appendChild(tab);
            //點選新增過後，清空輸入框的值   ""與" "不一樣
            txt1.value="";
            txt2.value="";
            txt3.value="";
        }

        //建立表頭行
        function createTH(){
            var tr=document.createElement('tr');
            tr.insertCell().innerHTML="編號";
            tr.insertCell().innerHTML="名字";
            tr.insertCell().innerHTML="年齡";
            tr.insertCell().innerHTML="操作";
            return tr;
        }

        //建立 普通行內容
        function createTD(id,name,addre){
            //建立行
            var tr=document.createElement('tr');
            //建立列
            tr.insertCell().innerHTML=id;
            tr.insertCell().innerHTML=name;
            tr.insertCell().innerHTML=addre;

            //建立最後一列
            var td=tr.insertCell();//新增刪除
            //超連結
            var l=document.createElement('a');
            l.href="#";
            l.innerHTML="刪除";
            l.onclick=function(){
                if(confirm("是否刪除？")){
                    //儲存  行節點
                    var hang=this.parentNode.parentNode.parentNode;
                    //行節點的父節點表格
                    hang.parentNode.removeChild(hang);
                }
            }
            //把超連結放到 td最後一列中
            td.appendChild(l);
            //把列到一行中
            tr.appendChild(td);
            //把行返回給呼叫者
            return tr;
        }
    </script>
</body>
</html>

var v1=txt1.value;
txt1.value是拿輸入框裡的值
把文字框裡的值賦值給變數v1，賦值語句。    
屬性的設定：
    node.屬性名=屬性值
屬性值的獲取：
    node.屬性名

<img src="../imgs/1.jpg" alt="" id="pic1">
    <img src="../imgs/2.jpg" alt="" id="pic2">
    <script type="text/javascript">
        //圖片二的內容和圖片一保持一致
        var img1=document.getElementById('pic1');
        var img2=document.getElementById('pic2');

        //屬性的獲取    pic1獲取裡面的src的值  *  把值賦給img2.src。
        img2.src=pic1.src;

把一個節點的屬性節點值賦給=另個節點相當於與把屬性節點賦值給=另個節點
例子：

var a="";
var b=" ";
if(a==b){
alert("等於");
}else{
    alert("不等");
 }

在這個例子裡面有個問題就是在錄入資訊後清除輸入框值的時候後
“”，“ ”
這兩個是不一樣的。一個是沒有資料，一個是空格。

HTML DOM新增資訊

dom節點新增資訊，點選按鈕錄入一條資訊 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</ti

08 DOM 新增和刪除元素、HTML DOM常用物件

正課: 1. 新增/刪除元素 2. ***HTML DOM常用物件 select/option table/行分組/tr/td form 1. 新增/刪除元素: 新增: 3步: 1. 建立新的空元素: var a=docum

JavaScript HTML DOM 元素 (節點)新增，編輯，刪除

createElement，createTextNode，appendChild，insertBefore，removeChild，replaceChild createElement 以下程式碼是用於建立 <p> 元素: var para = document.crea

HTML DOM item() 方法

child best ner == asc ctype sre 回文代碼一直不知道javascript還有類似jQ裏面eq()的函數，原來原生javascript的item()有類似功能：由於是原生javascript,先補習下children和childNodes

HTML DOM addEventListener() 方法

innerhtml err 版本號 list 更多 use run afa 手冊定義和用法 addEventListener() 方法用於向指定元素添加事件句柄。提示：使用 removeEventListener() 方法來移除 addEventListener()

核心DOM和html DOM的區別

技術分享 row 標簽 node splay out mov ... tex DOM分為三部分：（1）核心DOM：遍歷DOM樹、添加新節點、刪除節點、修改節點（2）HTML DOM：以一種簡便的方法訪問DOM樹（3）XML DOM：準用於操作XML文檔核心D

HTML DOM 屬性

使用 tab 簡單方法 htm 文本節點 undefined text 大寫 null innerHTML 屬性獲取元素內容的最簡單方法是使用 innerHTML 屬性。 innerHTML 屬性對於獲取或替換 HTML 元素的內容很有用。實例下面的代碼獲取 id="

JavaScript HTML DOM

文檔 pre tel mod 實例最簡 nts model images 通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。 HTML DOM （文檔對象模型）當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object

JavaScript HTML DOM 元素（節點）

enc javascrip item pan 效果 demo 移動元素成功 append 在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性： 1. nodeName : 節點的名稱 2. nodeValue ：節點的值 3. no

JavaScript HTML DOM - 改變CSS

head char document ctype .cn body pre 語法 logs 改變 HTML 樣式 //語法document.getElementById(id).style.property=new style <p id="p2">He

JavaScript HTML DOM 事件

pan 代碼 inner date load ntb 用戶按鈕 scrip 對事件做出反應我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代

HTML DOM 實例

htm domain 主機 idt type hspa 內容 doctype 輸入文本 Document 對象返回文檔中錨的數目 document.write(document.anchors.length);//document會覆蓋原網頁返回文檔中第一個錨的 i

javascript--- HTML DOM

web post 動態頁面編程結構化認知部分方法 -- 看了這個題目，不知聰明的讀者會有什麽樣的感覺？這篇文章將要講javascript和DOM的關系呢？還是要講javascript的DOM?在這裏我首先就講明文章的主旨有兩點：什麽

HTML DOM 第五篇

不同版本按鍵 javascrip 點擊 div 開元按鈕驗證瀏覽器類型通過 HTML DOM，JavaScript 能夠訪問 HTML 文檔中的每個元素。 HTML DOM 允許您在事件發生時執行代碼。當 HTML 元素"有事情發生"時，瀏覽器就會生成事件：

HTML DOM節點的增刪改查

自己 div text dom節點定義 pos 就會 fcm .get 上篇博客中，我們已經初步接觸了DOM基礎，可是我們學習是為了可以更好地應用，今天我們就來看看DOM節點的增刪改查。無論在哪裏，我們想要操作一個東西，總是應該先去獲得它。那麽

html dom與javascript的關系 -我們用JavaScript對網頁（HTML）進行的所有操作都是通過DOM進行的

兩種得來來講都對標記組織程序員 tro sdn 一，什麽是DOM (參考源http://www.cnblogs.com/chaogex/p/3959723.html) DOM是什麽 DOM全稱為The Document Object Model，應該理解為是一個

JavaScript HTML DOM增刪改查

刪除 scrip color 沒有 id屬性 tag reat 添加 val 首先 js 可以修改HTML中的所有元素和屬性，它還可以改變CSS樣式，並且可以監聽到所有事件並作出響應，這篇筆記呢主要記錄如何對HTML元素進行增刪改查。 1 查找DOM 第一種方式是我

JavaScript HTML DOM事件

splay nbsp onload style blog div 提交 cookies cti HTML DOM 使javaScript有能力對HTML事件作出反應。 HTML事件的例子：當用戶點擊鼠標時當網頁已加載時當圖像已加載時當鼠標移動到元素上時當輸入字段

HTML DOM事件

copy 常用 iter hist oca nco res chang list HTML DOM 事件常用事件事件描述 onchange HTML 元素改變 onclick 用戶點擊 HTML 元素 onmouseover 用戶在一個HTML元素上移動

使用HTML DOM 來分配事件 —— onmouseover和onmouseout ，onmousedown和onmouseup

wid bsp this 謝謝 seo -c png 代碼 inner 一， onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。一個小例：鼠標未在上

HTML DOM新增資訊

相關推薦