如何使用 Javascript 创建 HTML 标签？

Question

我有这段代码，我想使用 JavaScript 创建，因为我将在多个文件中使用它。 我考虑过使用：after with CSS 但它没有用。 然后我考虑使用 DOM 操作来创建 HTML 标签，但我无法完成它。

谁能帮我？

下图说明了我要完成的工作

1. 主div标签
2. 主 div 标签内的 div 标签
3. 我想使用 JavaScript 创建的 div 标签

提前致谢，

谢谢大家的帮助。 这是我从你的回复中得到的

//CREATE MENU DIVs

    const mainbody = document.querySelector('body') //or target div

    const divbtn = document.createElement('div');
    divbtn.setAttribute('id','btn');

    const img = document.createElement('img');
    img.setAttribute('src', 'https://thiagoprado.com/demo/learning/overlay-menu.png');
    img.setAttribute('id','menu');
    img.style.display = "block";

    const img2 = document.createElement('img');
    img2.setAttribute('src', 'https://thiagoprado.com/demo/learning/close-menu.png');
    img2.setAttribute('id','x');
    img2.style.display = "none";

    divbtn.appendChild(img);
    divbtn.appendChild(img2);
    //canvasDIV.appendChild(div);
    document.getElementById("c2canvasdiv").appendChild(divbtn);


    // second main DIV

    const divbox = document.createElement('div');
    divbox.setAttribute('id','box');

    const divItems = document.createElement('div');
    divItems.setAttribute('id','items');

    const divItem = document.createElement('div');
    divItem.setAttribute('class','item');

    const divItem2 = document.createElement('div');
    divItem2.setAttribute('class','item');
    //divItem2.setAttribute('id','item2');

    const link1 = document.createElement('a');
    link1.setAttribute('href','https://thiagoprado.com/demo/learning/');

    const img3 = document.createElement('img');
    img3.setAttribute('src', 'https://thiagoprado.com/demo/learning/home-60x60.png');


    const link2 = document.createElement('a');
    link2.setAttribute('href','#');

    const img4 = document.createElement('img');
    img4.setAttribute('src', 'https://thiagoprado.com/demo/learning/logo-60x60.png');

    divbox.appendChild(divItems);
    divItems.appendChild(divItem);
    divItem.appendChild(link1);
    link1.appendChild(img3);

    divItems.appendChild(divItem2);
    divItem2.appendChild(link2);
    link2.appendChild(img4);        

    document.getElementById("c2canvasdiv").appendChild(divbox);

Answer 1

动态 HTML

通过 javascript 操作 DOM 是生成动态内容的最快方式，但是它可能非常冗长，因此难以阅读、维护和避免错误。

当您编写代码时，您应该始终考虑保留代码D.R.Y。

您的代码示例有 42 行，12 个临时变量。 一眼看去，它对您正在创建的结构没有任何线索。 如果设计发生变化怎么办，如果您在一个月后回来进行更改，那将是很多工作。

• 使用函数来完成重复性任务
• 考虑如何构建数据以便从中轻松提取信息。
• 避免不良的编码习惯。

例子

使用 DRY 原则

• 为常见任务创建 3 个函数创建，append 和查询，
• 将 url 基数存储在变量中（避免在输入长字符串时出现拼写错误）
• 构建代码以反映它正在创建的内容

结果是在更短的时间内编写出更多质量更好的代码。

以下内容与您的代码示例完全相同。

const url = "https://thiagoprado.com/demo/learning/";
const element = (tag, props = {}) => Object.assign(document.createElement(tag), props);
const append = (par, ...sibs) => sibs.reduce((p, sib) => (p.appendChild(sib), p), par);
const queryEl = (qStr, el = document) => el.querySelector(qStr);

append(queryEl("#c2canvasdiv"),
  append(element("div", {id: "btn"}),
    element("img", {id: "menuEl", src: url + "overlay-menu.png", className: "block"}),
    element("img", {id: "closeEl", src: url + "close-menu.png", className: "hide"}),
  ),
  append(element("div", {id: "box"}),
    append(element("div", {id: "items"}),
      append(element("div", {className: "item"}),
        append(element("a", {href: url}), element("img", {src: url + "home-60x60.png"}))
      )
    ),
    append(element("div", {className: "item"}),
      append(element("a", {href: "#"}), element("img", {src: url + "logo-60x60.png"}))
    )
  )
);

哦，CSS 规则作为内联 styles 是一个非常坏的习惯

.hide {display: none}
.block {display: block}

_{PS 如果不需要，请不要使用setAttribute}

Answer 2

这是您要找的 javascript。 通过js创建元素的一个小例子。 通过阅读这个。 你应该能够完成你想要的。

const root = document.querySelector('body') //or target div
const div = document.createElement('div');
div.innerHTML = "text for div";
const img = document.createElement('img');
img.setAttribute('src', 'urlString');
div.setAttribute('id','box');

div.appendChild(img);
root.appendChild(div);

Answer 3

使用 document.createElement，分配 innerHTML 和 ID，最后将 append 节点分配给父元素。

https://www.w3schools.com/JSREF/met_document_createelement.asp