js 实现 HTML 的拼接

在实际项目中 经常会用到利用 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 值时填充进来的，可以根据获取的值进行替换。 拼接字符串时注意格式正确。