如何使用 Javascript 创建 HTML 标签？答案

【问题标题】：How can I create HTML tags using Javascript?如何使用 Javascript 创建 HTML 标签？
【发布时间】：2021-01-07 16:44:33
【问题描述】：

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

谁能帮帮我？

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

主 div 标签
主 div 标签内的 div 标签
我想使用 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);

【问题讨论】：

DOM 操作是正确的方法。您是否研究过如何在 JavaScript 中创建 HTML 元素？
但我无法完成。怎么会？你能告诉我们你尝试了什么，出了什么问题吗？编辑您的问题并添加您的 JS。
这能回答你的问题吗？ info on javascript document.createElement()
注意：大多数时候你不需要打电话给.setAttribute，你可以做例如link2.href = ....

标签： javascript html css dom canvas

【解决方案1】：

动态 HTML

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

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

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

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

示例

使用 DRY 原则

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

结果是在更短的时间内获得更多质量更好的代码。

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

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 规则作为内联样式是一个非常糟糕的习惯

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

_{P.S 如果不需要，请不要使用setAttribute}

【讨论】：

很好的解决方案。我喜欢复杂程度。我一定会收藏它以备将来使用。

【解决方案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);

【讨论】：

-1 您应该使用Element.textContent 添加文本内容而不是innerHTML。您仅对未由 DOM 定义的属性使用 setAttribute，并且仅在您希望解析该属性时使用。 id 和 src 已在 DOM 中定义，无需使用 setAttribute 更改值。您也不需要查询 body 它是文档的属性，例如 document.body.appendChild
我会要求你删除那个 -1：如果你在 js 中生成元素，set 属性是 100% 正确的......（他不是通过 javascript 编辑它们，而是创建它们，所以什么都没有已定义）。查询是为了显示如何附加/抓取已经定义的东西。以上只是相关代码的一个示例。虽然我一般同意 textContent：innerHTML 很有用。
??不编辑它们？？我看不出创作和编辑之间的区别。 DOM 属性总是被定义，例如document.createElement('div').id === "" 为真（img src 相同）如果它们没有被定义，它们将等于 undefined document.createElement('div').randomProp === undefined 为真。 .100% 不确定这意味着什么。一切平等，最简单的总是首选document.body.appendChild(Object.assign(document.createElement('div'), {textContent: "hello world", id: "box"})));
const javascriptCREATEDELEMENT = document.createElement("div"); `````` console.log(javascriptCREATEDELEMENT.id) //未定义。 ``````` javascriptCREATEDELEMENT.setAttribute("id", "test"); ```````` console.log(javascriptCREATEDELEMENT.id) //测试。 `````
你写了 "console.log(document.createElement("div").id) //undefined." 你用的是什么浏览器。 console.log(document.createElement("div").id === "");//true 和 console.log(document.createElement("div").id === undefined); // false。仅为需要解析的未定义属性或希望出现在标记中的未定义属性设置和获取属性。而 "... 通常不要用 =" 修改 DOM 元素，通常你的意思是.....？

【解决方案3】：

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

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

【讨论】：