创建标记的三种方法

Question

我有一个方法，该方法用于在另一个div中创建div ...但是它不起作用...

这是方法：

populateSquares(){
    let relatedTagToPopulation = document.getElementById("questionp");
    let whatTextIs = relatedTagToPopulation.textContent;
    for (let u=0;u<this.stemQuestions.length;u++){
        if (this.stemQuestions[u]==whatTextIs){
            var populateSquaresPertinentInt = u;
        }
    }
    for  (let i=0;i<this.stemAnswers.length;i++){
        if (i==populateSquaresPertinentInt){
            let numberOfSquaresToAdd = this.stemAnswers[i].length;
            for (let j=0;j<numberOfSquaresToAdd;j++){
                let elToAdd = document.createElement("<div id='ans"+j+"' class='lans'></div>"); 
                let elToAddInto = document.getElementById("answeri"); 
                elToAddInto.appendChild(elToAdd); 
            }
        }
    }
}

它发出此错误...

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<div id='ans0' class='lans'></div>') is not a valid name.

Answer 1

如果您使用的是JavaScript，则应遵循以下文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement，以及此处的CreateElement with id?

let elToAdd = document.createElement('div')
// then call `elToAdd.xxxx` to add attributes or do other operation on the element
elToAdd.setAttribute("id", "ans" + i);
// ... more

如果您使用的是jQuery，则可以使用：

let elToAdd = jQuery("<div id='ans"+j+"' class='lans'></div>")

Answer 2

创建标记的三种方法

以下示例都具有相同的作用：^✱
使用类<article>创建一个.post标签，并将其添加到<main id="main">标签中。
^{^✱有一个例外，请参阅＃2 .innerHTML}

`document.createElement(tagName)`

唯一的参数是tagName（例如"DIV"，"SPAN"，"IFRAME"等）。创建后，需要将其添加到DOM：

const post = document.createElement("ARTICLE");
post.className = "post";
document.getElementById('main').appendChild(post);

这是一种古老而稳定的方法，但是需要两行来创建一个准系统标签。分配属性和内容需要更多代码。

`.innerHTML += htmlString`

此属性将从目标标记内的给定String中解析一个标记。如果使用=运算符，则目标标记的所有内容都将被htmlString覆盖。如果使用+=运算符，则htmlString将附加到目标标记内的内容。

document.querySelector('main').innerHTML += `<article class='post'></article>`;

此模式简单且通用。在一行中，可以创建具有属性和内容的多个标签。它仅限于覆盖内容：=或附加到内容：+=。

^✱编辑： Kaiido通知我.innerHTML将替换所有内容，因此，如果您担心事件绑定或引用不使用它，则将其替换。请参阅下面的评论。

`.insertAdjacentHTML(position, htmlString)`

这是类固醇上的.innerHTML。它将在目标标签的给定htmlString之前/之后/内部/外部插入。第一个参数是确定相对于目标标签的插入位置的四个字符串之一：

"beforebegin" <div id="target"> "afterbegin" text content "beforeend" </div> "afterend"

第二个参数是要插入的htmlSting。

document.getElementsByTagName('MAIN')[0].insertAdjacentHTML('afterbegin', `
  <article class='post'></article>
`);

我无法遵循您的代码，但这应该是一种方法？因此，该演示有一个名为populate的对象，还有一个名为documentSection()的工厂函数，该函数创建对象并从.createSection()继承方法populate。

演示

let text = ['post 1', 'post 2', 'post 3'];
let archives = ['document 1', 'document 2', 'document 3'];

const populate = content => ({
  createSections: () => {
    let idx = 0;
    const target = document.querySelector("main");
    /* 
    Pattern 1 - document.createElement(tagName)
    */
    const section = document.createElement('SECTION');
    section.id = content.title;
    target.appendChild(section);
    /*
    Pattern 2 - .innerHTML += htmlString
    */
    section.innerHTML += `<h2>${content.title}</h2>`;
    for (let text of content.text) {
      idx++;
      /*
      Pattern 3 - .insertAdjacentHTML(position, htmlString)
      */
      section.insertAdjacentHTML('beforeend', `<article id="${content.title}-${idx}" class="t">${text}</article>`);
    }
  }
});

const documentSection = (title, text) => {
  let content = {
    title: title,
    text: text
  };
  return Object.assign(content, populate(content));
};

const post = documentSection('Post', text);
const archive = documentSection('Archive', archives);

post.createSections();
archive.createSections();

main {
  display: table;
  border: 3px ridge grey;
  padding: 2px 10px 10px;
}

h1 {
  font: 900 small-caps 1.5rem/1 Tahoma;
  margin-bottom: 8px
}

h2 {
  font: 700 small-caps 1.2rem/1 Tahoma;
  margin-bottom: 8px
}

section {
  border: 2px solid #000;
  padding: 2px 8px 8px;
}

article {
  font: 400 1rem/1.25 Arial;
}

.t::before {
  content: attr(id)': ';
  font-weight: 700;
}

<main>
  <h1>Documents</h1>
</main>

JavaScript函数为什么不创建HTML元素？

2 个答案:

创建标记的三种方法

`document.createElement(tagName)`

`.innerHTML += htmlString`

`.insertAdjacentHTML(position, htmlString)`

演示