使用 Javascript 动态创建 HTML 元素? [英] Dynamically creating HTML elements using Javascript?
问题描述
我想动态创建一些 HTML 元素(3 个 html 元素)，然后将此 html 代码作为变量中的字符串返回.我不想将以下函数中的 HTML 代码写入某个 div，但是，我想在 var 中返回它.
function createMyElements(id1,id2,id3){//创建带有id1的锚点//创建id为2的div//用id3创建xyz//现在返回上面刚才创建的html代码}我该怎么做?
[Edit 2021/10] 这个答案现在 >10岁.这是一个包含多种创建和/或注入元素的方法的片段.所问问题的答案(创建一些元素并检索它们的 html 代码)可以在@代码段底部找到.
//经典的 createElement//-------------------------//使用 document.createElement 创建一个段落元素const elem = document.createElement(`p`);elem.id = `myBrandnewDiv1`;//输入一些文本elem.appendChild(document.createTextNode(`我的全新 div #1`));//附加一些 html(为了演示，最好不要使用innerHTML)elem.innerHTML += ` =>创建使用<code>document.createElement</code>`;//在#myBrandNewDiv1 中追加一个新段落const 嵌套 = elem.appendChild(document.createElement(`p`));nested.classList.add(`nested`);//添加一些文本Nested.textContent = `我嵌套了！`;//元素仍在内存中，现在添加//整个辣酱玉米饼馅到文档document.body.appendChild(elem);//插入相邻HTML//------------------//在嵌套的 div 中嵌套一个元素nested.insertAdjacentHTML(`afterbegin`,`<div id="nestedWithin#nested">该文本将出现在 <i>above</i>的文本我的父母，那是 div#nested.有人胆敢插入我使用<code>insertAdjacentHTML</code>`);//对象.赋值//-------------//使用 Object.assign 创建一个元素并//一次性为其分配属性/htmlconst newElem = Object.assign(document.createElement(`div`),{ ID:`myBrandnewDiv2`，innerHTML:`div#myBrandnewDiv2 登录.我被<i>分配</i>使用<code>Object.assign</code>…`});document.body.appendChild(newElem);//insertAdjacentElement 结合 Object.assign//------------------------------------------------——//将上述技术与 insertAdjacentElement 结合使用newElem.insertAdjacentElement(`之前`，Object.assign(document.createElement(`span`),{ ID:`myBrandnewnested2_nested`，innerHTML:`<br>我也是！并附加我是使用 <code>insertAdjacentElement</code>` }));//创建文档片段//----------------------//使用文档片段来创建/注入 htmlconst fragment = document.createDocumentFragment();const mdnLnk = `https://developer.mozilla.org/en-US/` +`docs/Web/API/Document/createDocumentFragment`;fragment.appendChild(对象.赋值(document.createElement(`p`),{innerHTML:`来自<code>createDocumentFragment</code>的问候(参见<a href="${mdnLnk}">MDN</a>)`}));document.querySelector(`#myBrandnewDiv2`).appendChild(fragment);//创建，但不注入//------------------------const virtual = Object.assign(document.createElement(`p`),{ 内部 HTML:`<a href="#id1">id1</a><div id="id2">嗨！</div><p id="id3">嗨 2!</p>`,classList: [`xyz`], } );const prepareHtml4Reporting = html =>html.replace(/</g, `<`).replace(/ s+/g, ` `).replace(/ /g, ` `);document.body.insertAdjacentHTML(`之前`，`<h3>仅html</h3><pre>${prepareHtml4Reporting(virtual.innerHTML)}</pre>`);
body {字体:普通 12px/15px verdana、arial、sans-serif；保证金:2rem；}代码 {背景色:#eee;}.嵌套{左边距:0.7rem；最大宽度:450px；填充:5px；边框:1px 实心 #ccc；}我在这个库中使用了其中的一些方法(参见/src/DOM.js)，具有在注入之前清理 html 的机制.
I want to dynamically create some HTML elements (3 html element) and then return this html code as a string in a variable. I don't want to write the HTML code in the following function to some div, but, I want to return it in a var.
function createMyElements(id1,id2,id3){
//create anchor with id1
//create div with id 2
//create xyz with id3
//now return the html code of above created just now
}
How can I do this?
[Edit 2021/10] This answer is now > 10 years old. Here is a snippet containing several ways to create and/or inject elements. The answer for the question asked (create some element(s) and retrieve their html code) can be found @ the bottom of the snippet.
// The classic createElement
// -------------------------
// create a paragraph element using document.createElement
const elem = document.createElement(`p`);
elem.id = `myBrandnewDiv1`;
// put in some text
elem.appendChild(document.createTextNode(`My brand new div #1`));
// append some html (for demo, preferrably don't use innerHTML)
elem.innerHTML += ` => created using
<code>document.createElement</code>`;
// append a new paragraph within #myBrandNewDiv1
const nested = elem.appendChild(document.createElement(`p`));
nested.classList.add(`nested`);
// add some text to that
nested.textContent = `I am nested!`;
// the elements are still in memory, now add the
// whole enchillada to the document
document.body.appendChild(elem);
// insertAdjacentHTML
// ------------------
// nest an element within the nested div
nested.insertAdjacentHTML(`afterbegin`,
`<div id="nestedWithin#nested">
This text will appear <i>above</i> the text of
my parent, that being div#nested.
Someone had the nerve to insert me using
<code>insertAdjacentHTML</code>
</div>`);
// Object.assign
// -------------
// Use Object.assign to create an element and
// assign properties/html to it in one go
const newElem = Object.assign(
document.createElement(`div`),
{ id: `myBrandnewDiv2`,
innerHTML: `div#myBrandnewDiv2 signing in.
I was <i>assigned</i> using <code>Object.assign</code>…`});
document.body.appendChild(newElem);
// insertAdjacentElement combined with Object.assign
// -------------------------------------------------
// use the above technique combined with insertAdjacentElement
newElem.insertAdjacentElement(
`beforeend`,
Object.assign(document.createElement(`span`),
{ id: `myBrandnewnested2_nested`,
innerHTML: `<br>Me too! And appended I was
with <code>insertAdjacentElement</code>` })
);
// createDocumentFragment
// ----------------------
// Use a document fragment to create/inject html
const fragment = document.createDocumentFragment();
const mdnLnk = `https://developer.mozilla.org/en-US/` +
`docs/Web/API/Document/createDocumentFragment`;
fragment.appendChild(
Object.assign(
document.createElement(`p`),
{innerHTML: `Regards from <code>createDocumentFragment</code>
(see <a href="${mdnLnk}">MDN</a>)`})
);
document.querySelector(`#myBrandnewDiv2`).appendChild(fragment);
// Create, but don't inject
// ------------------------
const virtual = Object.assign(
document.createElement(`p`),
{ innerHTML: `
<a href="#id1">id1</a>
<div id="id2">Hi!</div>
<p id="id3">Hi 2!</p>`,
classList: [`xyz`], } );
const prepareHtml4Reporting = html =>
html.replace(/</g, `<`)
.replace(/
s+/g, `
`)
.replace(/
/g, `
`);
document.body.insertAdjacentHTML(
`beforeend`,
`<h3>html only</h3><pre>${
prepareHtml4Reporting(virtual.innerHTML)}</pre>`);
body {
font: normal 12px/15px verdana, arial, sans-serif;
margin: 2rem;
}
code {
background-color: #eee;
}
.nested {
margin-left: 0.7rem;
max-width: 450px;
padding: 5px;
border: 1px solid #ccc;
}
I have used some of these methods in this library (see /src/DOM.js), with a mechanism for sanitizing html before it is injecting.
这篇关于使用 Javascript 动态创建 HTML 元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
