添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
彷徨的斑马  ·  Platform.OnRequestPerm ...·  1 年前    · 
豁达的哑铃  ·  sql - ...·  1 年前    · 

这种方式是将你的 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 = `&lt;div&gt;&lt;span&gt;${name}&lt;/span&gt;&lt;/di... 在实际项目 ,难免会遇到在 js 动态拼接 html 代码 ,这样虽然比较简单,但是相对来说不太好维护,后期如果改了 html 结构,那么 js 改动的东西会比较多。如下 代码 就是动态拼接 html 的不太好的 代码 : var html = '&lt;a class="weui-cell weui-cell_access" href=""&gt;'+ '&lt;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 展示尖括号 "<" 和 ">",可以使用下列 代码 : &amp;lt; &amp;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: css设置边框 每日一题(二五)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: js最后都会自动给代码添加上分号吧