JS创建元素方法

小彬 管理员

作者很懒,什么都没留下!

字数869个, 阅读全文: 3 分钟
首页 Javascript 正文

很多初级开发者不知道“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
-- 展开阅读全文 --
JS根据ID删除元素
« 上一篇 2023-03-24
JQ创建元素的方法
下一篇 » 2023-03-24

发表评论

动态快讯

互动读者

  • 小站长 管理员

    作者很懒,什么都没留下!

    小站长 文章 5 篇
    作者很懒,什么都没留下!
  • 小彬 管理员

    作者很懒,什么都没留下!

    小彬 文章 139 篇
    作者很懒,什么都没留下!

热门文章

1
2
3

最多点赞

小彬 管理员

作者很懒,什么都没留下!

3赞, 阅读:29.8657w
小彬 管理员

作者很懒,什么都没留下!

12赞, 阅读:26.4668w
小彬 管理员

作者很懒,什么都没留下!

6赞, 阅读:26.465w
小彬 管理员

作者很懒,什么都没留下!

10赞, 阅读:26.4543w

标签TAG