在实际项目中 经常会用到利用 js 实现动态的添加前端代码,如动态添加图片和表格。
js 动态添加 html 代码主要有两种方法:
1、appendChild( ) 来实现节点以及文本内容的添加。
2、拼接标签字符串,并用 innerHTML 来添加。
具体实例:
1、appendChild( ) 方法:
//通过 createElement()方法来添加一个 p 元素 var p = document.createElement("p"); //通过 createTextNode()方法来添加一个文本节点 var node = document.createTextNode("我是一个新的段落,是js 的 appendChild 方法添加的!!"); //将文本节点添加到 p 元素中 p.appendChild(node); //获取所要添加的位置 var demo = document.getElementById("demo"); //在所需位置添加 p 元素 demo.appendChild(p);
2、拼接标签字符串,并用 innerHTML 来添加。(自我认为这个方法比较简便)
//通过 拼接 字符串 来添加 HTML 内容。 var name = '测试样例'; age = 18 ; var html = '' ; //动态添加一个段落 html += "<p> <b>我是另外一种方式添加的新段落!!!</b></p>"; //动态添加一个表格 html += '<table style="border:2px solid red;"> '; html += '<tr> <td> '+ name +' <td> </tr> '; html += '<tr> <td> '+ age +' <td> </tr> '; html += '</table>'; demo.innerHTML += html;
在拼接字符串时,中间的 name 、age 值时填充进来的,可以根据获取的值进行替换。 拼接字符串时注意格式正确。