很多初级开发者不知道“JS创建元素方法”,下面是示例代码:
// 创建一个元素
var p_first = document.createElement("p");
p_first.id = "pid";
p_first.className = "pclassname";
p_first.setAttribute('name', 'pname');
p_first.innerText='我是一个 p 标签!';
// 父元素 elementobj,可能是一个 list,若为单一元素,则后续引用无需加 [0]
const elementobj = document.querySelectorAll(selector);
// 在目标元素中插入
elementobj[0].appendChild(p_first);//直接添加在末尾
// 插入元素写法,入参有四种类型:
// beforebegin:目标元素的前面
// afterbegin:目标元素中,第一个子节点之前
// beforeend:目标元素中,最后一个子节点之后
// afterend:目标元素的后面
elementobj[0].insertAdjacentElement('beforeend',p_first);
// 插入 html 写法,入参有四种类型:
// beforebegin:目标元素的前面
// afterbegin:目标元素中,第一个子节点之前
// beforeend:目标元素中,最后一个子节点之后
// afterend:目标元素的后面
var p_html = '<p>我是一个 p 标签!</p>';
elementobj[0].insertAdjacentHTML('beforeend',p_html);
// 用 p_html 替换目标元素中的全部内容
elementobj[0].innerHTML = p_html;
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.xiaobinblog.com/1107.html
发表评论