[英]How can I create HTML tags using Javascript?
I have this code that I want to create using JavaScript since I will be using it in more than one file.我有这段代码,我想使用 JavaScript 创建,因为我将在多个文件中使用它。 I thought about using:after with CSS but it didn't work.
我考虑过使用:after with CSS 但它没有用。 Then I thought about using the DOM manipulation to create the HTML tags but I couldn't get it done.
然后我考虑使用 DOM 操作来创建 HTML 标签,但我无法完成它。
can anyone help me?谁能帮我?
The image below illustrate what I am trying to accomplish下图说明了我要完成的工作
Thanks in advance,提前致谢,
Thanks everybody for the help.谢谢大家的帮助。 Here is what I got from your response
这是我从你的回复中得到的
//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 manipulation via javascript is the quickest way to generate dynamic content, however it can be exceedingly verbose and thus hard to read, maintain, and keep free of bugs.通过 javascript 操作 DOM 是生成动态内容的最快方式,但是它可能非常冗长,因此难以阅读、维护和避免错误。
When you write code you should always be thinking about keeping the code D.R.Y.当您编写代码时,您应该始终考虑保留代码D.R.Y。
Your code example has 42 lines, 12 temp variables.您的代码示例有 42 行,12 个临时变量。 Looking at it in a glance it gives no clue to the structure you are creating.
一眼看去,它对您正在创建的结构没有任何线索。 And what if there is a design changes, that's a lot of work if you come back in a month and make changes.
如果设计发生变化怎么办,如果您在一个月后回来进行更改,那将是很多工作。
Using DRY principles使用 DRY 原则
The result is more code of better quality in less time.结果是在更短的时间内编写出更多质量更好的代码。
The following does exactly the same as you code example.以下内容与您的代码示例完全相同。
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"}))
)
)
);
Oh and CSS rules as in-lining styles are a very bad habit哦,CSS 规则作为内联 styles 是一个非常坏的习惯
.hide {display: none}
.block {display: block}
PS don't use setAttribute
if you don't need to PS 如果不需要,请不要使用
setAttribute
here is the javascript you are looking for.这是您要找的 javascript。 a small example of creating elements via js.
通过js创建元素的一个小例子。 by reading this.
通过阅读这个。 you should be able to accomplish what you want.
你应该能够完成你想要的。
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);
Use document.createElement, assign with innerHTML and ID and finally append node to parent element.使用 document.createElement,分配 innerHTML 和 ID,最后将 append 节点分配给父元素。
https://www.w3schools.com/JSREF/met_document_createelement.asp https://www.w3schools.com/JSREF/met_document_createelement.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.