DOM CRUD

免責事項：この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。

このリンク： https://blog.csdn.net/javascript_meng/article/details/100048911

どのようにHTML DOM JSによる操作（すなわち、CRUD）

通常プロパティとgetElementByIdを）1）チェック（
2）によって：
のcreateElement（tagNameを）要素ノードオブジェクトの作成
はcreateTextNode作成したテキスト・ノードを（）
のappendChild（）の子ノードとして指定されたノードに追加される
oldNodeが前のinsertBefore（newNode、oldNodeが） newNodeを挿入

のは、何の実用化の例を使ってみましょう

実施例（1）DIVノードオブジェクトを作成

var oDiv=document.createElement('div');
oDiv.innerHTML='新来的';
// console.log(oDiv);
//将创建的div追加到body种
document.body.appendChild(oDiv);

例（2）段落記号を作成します

 var op=document.createElement('p');
 op.innerHTML='我是段落';
console.log(op);
document.body.appendChild(op);

例（3）のdivスパンに挿入します

 var os=document.createElement('span');
 os.innerHTML='我是span';
 oDiv.appendChild(os);

例（4）段落記号ハイパーリンク内に挿入する前に
div要素で体がある場合は、DIVへのハイパーリンクがあります

    var aLink=document.links[0];
    // console.log(aLink)
    //创建段落标记
    var op=document.createElement('p');
    op.innerHTML='段落';
    // o.insertBefore(aLink,op);
    o.insertBefore(op,aLink);

3）交換してください：のreplaceChildを（）古い新しいノードを交換

例：

<div id="box">hello</div>
<p id="p0">你好</p>

   var op=document.getElementById('p0');
    var o=document.getElementById('box');
    //创建新节点
    var oDiv=document.createElement('div');
    oDiv.innerHTML='你很好';
    //替换
    document.body.replaceChild(oDiv,op);
    //创建段落标记
    var newP=document.createElement('p');
    newP.innerHTML='新的段落';
    document.body.replaceChild(newP,o);

4）ノードを削除：のremoveChild（）
（ノードを削除します：クリックイベント内で、この要素がクリックされたことを意味します）

例：

<ul id="list">
        <li>1<a href="javascript:void(0)">删除</a></li>
        <li>2<a href="javascript:void(0)">删除</a></li>
        <li>3<a href="javascript:void(0)">删除</a></li>
        <li>4<a href="javascript:void(0)">删除</a></li>
    </ul>

 <script>
        var oUl=document.getElementById('list');
        var len=document.links.length;
        for(var i=0;i<len;i++){
            document.links[i].onclick=function(){
                this.parentNode.parentNode.removeChild(this.parentNode);
            }
        }
    </script>

おすすめ