这种方式是将你的 html 结构的字符串直接给某个节点的 innerHTML 属性:
var name = 'leo';
var htmlStr = `<div><span>${name}</span></div>`
document.querySelector('.box').innerHTML = htmlStr;
上面的innerHTML方法是将目标元素的内部所有内容替换,不能追加和插入某个节点的前后位置。
二、使用 appendChild 或者 insertBefore 的方式
这种方式的参数必须是 node 节点。所以需要我们先将 html 字符串转换为 node 节点
将字符串格式的 html 转为 node 插入文档
一、使用 DOMParser
DOMParser
接口提供了将 XML 或 HTML 源代码从字符串解析为DOM的
功能 Document
。
DOMParser()
构造函数新建一个 DOMParser 对象实例,可以通过这个对象的
parseFromString()
方法将字符串解析为 DOM 对象。
DOMParser 实例的 parseFromString 方法可以用来直接将字符串转换为document 文档对象。有了document之后,我们就可以利用各种 DOM Api来进行操作了。
function createDocument(txt) {
const template = `<div class='child'>${txt}</div>`;
let doc = new DOMParser().parseFromString(template, 'text/html');
let div = doc.querySelector('.child');
return div;
const container = document.getElementById('container');
container.appendChild(createDocument('hello'));
二、使用 DocumentFragment
document.createRange() 返回一个 range 对象,range 对象表示文档中的连续范围区域,如用户在浏览器窗口用鼠标拖动选择的区域,利用 document.createRange().createContextualFragment 方法,我们可以直接将字符串转化为 DocumentFragment 对象
var name = 'leo';
var template = `<li>${name}</li>`;
var frag = document.createRange().createContextualFragment(faceInfoItem);
var list = document.querySelector('.box ul');
//如果使用 appendChild
list.appendChild(frag);
//如果使用 insertBefore ,insertBefore 即使第二个参数为 null 也能插入进去,就像append了一个元素
list.insertBefore(frag,list.firstElementChild);
利用documentFragment批量插入节点,当我们每次单独创建节点并插入文档时会造成很大的性能浪费,可以先把节点放入documentFragment 中 最后统一放入文档中。
var temp = function(id){
return `<li><span>now id is ${id}</span></li>`;
var createFrag = function(temp){
return document.createRange().createContextualFragment(temp);
var box = document.querySelector('.box ul');
var docFrag = document.createDocumentFragment();
for(let i=0;i<100;i++){
docFrag.appendChild(createFrag(temp(i)));
box.appendChild(docFrag);
利用 documentFragment 和 innerHTML 封装一个 类似于 jquery 的 append 方法,既可以插入节点,又可以插入字符串:
function append(container,text){
if(typeof text === 'object'){
container.appendChild(text);
return ;
let box = document.createElement('div');
let frag = document.createDocumentFragment();
box.innerHTML = text;
while(box.firstElementChild){
frag.appendChild(box.firstElementChild);
container.appendChild(frag);
//测试:
//1.加入字符串
var box = document.querySelector('.box ul');
var temp = `
<li>我是li3<span>6666</span></li>
<li>我是li2</li>
<li>我是li1</li>
var arr = [1,22,4,5,6,6,7,8,90,'123','666666'];
var lis = '';
arr.forEach(item=>{
lis+= `<li>${item}</li>`;
append(box,lis);
//2.插入元素节点
var li = document.createElement('li');
li.appendChild(document.createTextNode('我是text node 节点'))
append(box,lis);
使用原生 JS 经常会遇到将 html 字符串往页面的的某个节点插入,这里介绍几种插入方式插入方式一、使用 innerHTML 方式这种方式是将你的 html 结构的字符串直接给某个节点的 innerHTML 属性:var name = 'leo';var htmlStr = `<div><span>${name}</span></di...
在实际项目
中
,难免会遇到在
js
中
动态拼接
html
的
代码
,这样虽然比较简单,但是相对来说不太好维护,后期如果改了
html
结构,那么
js
改动的东西会比较多。如下
代码
就是动态拼接
html
的不太好的
代码
:
var
html
= '<a class="weui-cell weui-cell_access" href="">'+
'<div class="weui-ce...
参数说明:str表示原
字符串
变量,flg表示要
插入
的
字符串
,sn表示要
插入
的位置
function insert_flg(str,flg,sn){
var newstr="";
for(var i=0;i
var tmp=str.substring(i, i+sn);
newstr+=tmp+flg;
要在
HTML
中
展示
HTML
语法的
字符串
,可以使用
HTML
实体的形式来转义这些字符。
例如,要在
HTML
中
展示尖括号 "<" 和 ">",可以使用下列
代码
:
&lt; &gt;
HTML
实体的形式如下:
"<" 表示 "<"
">" 表示 ">"
"&" 表示 "&"
"'" 表示 "'"
""...
js
字符串
转换为
html
是指将一个
字符串
变成
html
标签和文本内容的结合体。在此过程
中
我们需要使用特定的方法将
字符串
解析为
html
格式
,并且将其
插入
到
文档
中
。
首先,我们需要创建一个空的
html
标签或者使用一个已经存在的标签。通过使用 appendChild 方法我们可以将解析后的
字符串
添加到该标签内部。例如:
```javascript
const str = '<h1>这是一个标题</h1>';
const container = document.
create
Element('div');
container.inner
HTML
= str;
document.body.appendChild(container);
上面
代码
中
,我们首先创建了一个
字符串
`str`,它是一个 h1 标题及其内容。然后我们使用
create
Element 方法创建一个 div 容器,并将该容器添加到
文档
的 body 元素
中
。接下来我们通过 inner
HTML
将容器内部的
html
内容赋值为 `str`。最后我们通过 appendChild 方法将该容器添加到
文档
中
。
注意:
字符串
中
不能包含包含 script 标签等可能引入安全风险的
html
标签。如果需要使用 script 标签等这些标签,必须经过服务端过滤和处理。
通过
js
字符串
转换为
html
,可以将生成的
html
代码
动态
插入
到
页面
中
,实现动态
页面
的目的。但是在使用过程
中
需要注意安全问题,避免引入不可靠的
html
代码
。
CSS3中nth-of-type与nth-child区别分析详解,nth-of-type和nth-child对比区别,CSS3强大选择器nth-of-type,nth-child
无与有并存:
在使用flex布局方式让最后一个元素居右(最右边)显示,一层 HTML 结构实现左“右”布局,使用flex实现居中对齐
1234567865:
每日一题(二五)var arr = [0,1,2]; arr[10] = 10; var newArr = arr.filter((x)=>x===undefined);
hzqsns:
每日一题(二四)function getName(){for(let i=0;i5;i++){setTimeout(_=>{console.log(i)},i*10)}return{name:'a'}
hzqsns: