精华内容
下载资源
问答
  • 获取元素时,其返回的是数组,而没有定位到某一具体对象(类似的还有使用 getElementsByTagName() 获取) 所以使用此类方法获取元素时,只需定位到某一具体元素,让浏览器知道在哪个元素下添加子节点即可 ...

    报错信息:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div class="div1">
            <p>节点1</p>
            <p>节点2</p>
        </div>
        
        <script>
            var oSpan = document.createElement("span");
            var oTxt = document.createTextNode("新段落");
            oSpan.appendChild(oTxt);
            
            var oDiv = document.getElementsByClassName("div1");
            oDiv.appendChild(oSpan);
        </script>
        
    </body>
    </html>
    

    在这里插入图片描述
    神奇的信息,为啥appendChild不是一个函数,魔了

    源头在于 —— document.getElementsByClassName(“div1”);

    当使用 getElementsByClassName() 获取元素时,其返回的是数组,而没有定位到某一具体对象
    (类似的还有 getElementsByTagName() 方法,getElementsByTagName() 方法返回 HTMLCollection 对象,HTMLCollection 对象类似包含 HTML 元素的一个数组,看起来可能是一个数组,但其实不是,不过可以像数组一样,使用索引来获取元素)

    所以使用此类方法获取元素时,只需定位到某一具体元素,让浏览器知道在哪个元素下添加子节点即可
    改正如下:document.getElementsByClassName(“div1”)[0];

    展开全文
  • js创建子节点JavaScriptHTMLJavaScriptHTMLjavascriptHTMLvar otest1 = document.getElementById("test1");var newnode1=document.createElement("li");newnode1.innerHTML="This is a new li";otest1.appendChild...
    js创建子节点
    • JavaScript
    • HTML
    • JavaScript
    • HTML
    • javascript
    • HTML

    var otest1 = document.getElementById("test1");

    var newnode1=document.createElement("li");

    newnode1.innerHTML="This is a new li";

    otest1.appendChild(newnode1);

    //          otest1.insertBefore(newnode1,otest1.lastChild);

    var otest2 = document.getElementById("test2");

    var newnode2=document.createElement("li");

    newnode2.innerHTML="this is a new li";

    otest2.insertBefore(newnode2,otest2.firstChild);

    //          指定位置插入

    var otest3 = document.getElementById("test3");

    var node3=document.getElementsByClassName("li")[1];

    var newnode3=document.createElement("li");

    newnode3.innerHTML="this is a new li";

    otest3.insertBefore(newnode3,node3);

    展开全文
  • 分享给大家供大家参考,具体如下:www.jb51.net JS节点插入function showinsert(){ //添加子节点var str=document.getElementById("mydiv");var zif="段落五";var obj=document.createElement("p"); //添加哪类节点v...

    本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作。分享给大家供大家参考,具体如下:

    www.jb51.net JS节点插入

    function showinsert(){ //添加子节点

    var str=document.getElementById("mydiv");

    var zif="段落五";

    var obj=document.createElement("p"); //添加哪类节点

    var objNode=document.createTextNode(zif); //创建文字节点

    str.appendChild(obj);

    obj.appendChild(objNode);

    }

    function showesideinsert(){ //添加兄弟节点

    var str=document.getElementById("mydiv");

    var zi="添加段落";

    var strBrother=str.children[1];

    var strNode=document.createElement("p");

    var strTextNode=document.createTextNode(zi);

    str.insertBefore(strNode,strBrother);

    strNode.appendChild(strTextNode);

    }

    段落一

    段落二

    段落三

    段落四

    使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试运行效果如下:

    希望本文所述对大家JavaScript程序设计有所帮助。

    展开全文
  • js动态添加子节点

    千次阅读 2017-10-31 17:57:23
    //添加子节点li  ul.appendChild(li); //获得当前添加的li var newli = document.getElementById("liid"+i); //在添加的li中创建子节点div var div = document.createElement("div"); //给子...
    	function addElement_pic(i,imgsrc,website,landingPage){
    			//获得ul
    			var ul = document.getElementById("hot_web_pic");
    			//创建li
    			var li = document.createElement("li");
    			//给li设置属性
    		    li.setAttribute("class", "fl limar");
    		  	li.setAttribute("id", "liid"+i);
    		  	//添加子节点li
    		    ul.appendChild(li);
    		    //获得当前添加的li 
    		    var newli =  document.getElementById("liid"+i);
    		    //在添加的li中创建子节点div
    		    var div = document.createElement("div");
    		    //给子节点div设置属性
    		    div.setAttribute("id", "divid"+i);
    		    //创建子节点
    		    newli.appendChild(div);
    		    var newdiv =  document.getElementById("divid"+i);
    		    //给div设置div
    		    document.getElementById("divid"+i).style.width="58px";
    		    document.getElementById("divid"+i).style.height="59px";
    		    //创建子节点img
    		    var img = document.createElement("img");
    		    //给img设置属性
    		    img.src = imgsrc;
    		    //添加子节点
    		    newdiv.appendChild(img);
    		    //创建子节点p
    		    var textp = document.createElement("p");
    		    textp.innerHTML = website;
    		    newdiv.appendChild(textp);
    		    newdiv.οnclick=function(){//给p标签添加onclick事件
    		    	window.open(landingPage);
    	    };
    	}

    展开全文
  • var fragment = document.createDocumentFragment();li = document.createElement('li');li.className = "xxx";fragment.appendChild(li);document.getElementById("xx")....如上,须要先原生创建节点节点内容成为...
  • js添加option子节点

    2019-03-24 17:38:32
    function getOption(optionVal){         var option = document.createElement(“option”);    ... option.setAttribute(“value”, optionV...
  • js遍历 子节点 子元素

    万次阅读 2014-08-05 11:20:46
    // 添加子节点前 删除所有子节点  var usernameEle = document.getElementById("username");  var childs = usernameEle.childNodes;   for(var i = childs.length - 1; i &gt;= 0;...
  • js 添加DOM子节点
  • JS 遍历动态添加子节点

    千次阅读 2018-04-24 16:07:32
    var div = document....while(div.hasChildNodes()) //当div下还存在子节点时 循环继续 {  div.removeChild(div.firstChild); } var node0 = document.getElementById("parent"); var node1 = document...
  • 摘自:... js遍历 子节点 子元素 ...Js 节点 子元素 属性 方法  ...// 添加子节点前 删除所有子节点  var usernameEle = document.getElementById("username");  var
  • 创建完节点后,还要使用appendChild()或insertBefore()将创建的节点插入到DOM的指定位置。1. createElement(name)创建元素节点createElement()是Document对象中的方法,该方法会根据指定的元素名称n...
  • newdocument学号姓名操作xh001王小明删除xh002刘小芳删除vartable=document.getElementById("table");vartr=table.getElementsByTagName("tr");window.onload=function(){//点击添加新行,开始varbut=document.ge...
  • js新增子节点

    2018-02-13 16:19:45
    可作 添加按钮&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type"...插入子节点&lt;/title&gt; &lt;/head&gt; &
  • // 定义搜索节点树结构Store const nodeStore = Ext.create('Ext.data.TreeStore', {  autoLoad : true,  id : 'nodeStoreTreeId',  fields : ['index', 'nodeId', 'name_or_index', 'to_node', 'type'],...
  • 在父节点下建立新的节点当作原有子节点的父节点 //假设这是原有父节点 let parent = document.getElementById("xxx"); //或者此为子节点的话用 parent.parentElement 来获取父节点 //创建新的父节点 let div = ...
  • 学习完HTM年据业会效近轻业务进果近轻业务进果近轻业L+css后,我并没有直接去学习HTML5和css3,而是开始学习JavaScript,现在就是jQuery基础也懂一点,js也懂一点,css3也懂得那么点。但是给我的感受就是不精通熟练,...
  • 本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作... function showinsert(){ //添加子节点 var str=document.getElementById("mydiv"); var zif="段落五"; var obj=document.createElement("p"); //
  • js appendChild removeChild 添加 删除 子节点 function createSpan(){ var span=document.createElement("span"); span.innerHTML="子节点"; document.getElementById("content").appendChild(span); } func
  • eletree append方法添加子节点 eletree官方文档中,提供了append方法用于添加子节点。 append方法接收两个参数,key、data。key很好理解,是你选择添加子节点的节点key,重点在于data。一般来说,我们取到节点数组...
  • //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个兄弟节点 var ps=s.previousSbiling; //得到s的上一个兄弟节点 var fc=s.firstChild; //获得s的第一...
  • impressionHtml=`<img src=${value} alt=""/>`; document.getElementById("wrapper").appendChild...js向父元素wrapper中的末尾添加 定义好的html,报错: Uncaught TypeError: Failed to execute ...
  • <!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>节点添加</title> <style> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 559
精华内容 223
关键字:

js添加子节点