Question

大家好，我可能有一个小问题而且我不知道如何解决这个问题，我需要onclick事件，每当我点击它添加HTML代码，我都不想使用innerHTML因为它有风险，这就是代码：

button.addEventListener('click',function () {
    const elements = `<div class="list-elem ${classList} data-id=${id}">
            <div class="to-do-date">
                <h3>${myDateString + ' ' + myTimeString}</h3>
            </div>
            <i class="fas fa-times" style="display: flex;"></i>
            <div class="to-do-topic">
                <h1>${topic.value}</h1>
            </div>
            <div class="to-do-text">
                <p>${textarea.value}</p>
            </div>
        </div>`
    toDoLists.appendChild(elements);
    id++
})

如果我使用append()，它就像这样：

追加看起来像这样

如果我使用appendChild（），我有以下错误：

TypeError：Node.appendChild的参数1不是对象。

可能我愚蠢而且修复方式很简单，无论如何我想在没有jquery的情况下使用纯JS。

我希望我能在这里得到帮助，谢谢：）

Answer 1

我认为您必须使用如下所示的insertAdjacentHTML功能。阅读更多here

＆＃13;

var button = document.getElementById('btn');
var toDoLists = document.getElementById('toDoLists');

var id = 1,
  classList = "classList",
  myDateString = "6 May 2018",
  myTimeString = "21:56:13",
  topic = {
    value: 13
  },
  textarea = {
    value: 131313
  };

button.addEventListener('click', function() {
  const elements = `<div class="list-elem ${classList} data-id=${id}">
            <div class="to-do-date">
                <h3>${myDateString + ' ' + myTimeString}</h3>
            </div>
            <i class="fas fa-times" style="display: flex;"></i>
            <div class="to-do-topic">
                <h1>${topic.value}</h1>
            </div>
            <div class="to-do-text">
                <p>${textarea.value}</p>
            </div>
        </div>`
  toDoLists.insertAdjacentHTML('beforeend', elements);
  id++;
});

＆＃13;

<button id="btn">Click Me!</button>
<div id="toDoLists"></div>

＆＃13;

Answer 2

这是一个工作示例（包含大部分代码），可以在元素后附加html：
（见我的代码中的评论）

＆＃13;

// Code below to make a working example
var button = document.getElementById("button");
var toDoLists = document.getElementById("toDoLists");

var id = 1,
  classList = "classList",
  myDateString = "xx/xx/xxxx",
  myTimeString = "hh:mm:ss",
  topic = {
    value: "Topic"
  },
  textarea = {
    value: "Text in text area"
  };

// Here below, your code modified
button.addEventListener('click', function() {

  // Creates a div and fill it with the html you wanted
  var elements = document.createElement("div");
  elements.innerHTML = `<div class="list-elem ${classList} data-id=${id}">
        <div class="to-do-date">
            <h3>${myDateString + ' ' + myTimeString}</h3>
        </div>
        <i class="fas fa-times" style="display: flex;"></i>
        <div class="to-do-topic">
            <h1>${topic.value}</h1>
        </div>
        <div class="to-do-text">
            <p>${textarea.value}</p>
        </div>
    </div>`;

  toDoLists.appendChild(elements);
  // id++ // Disabled because fixed values for example !
})

＆＃13;

/* Some styling */

.list-elem {
  border: 1px solid gray;
}

＆＃13;

<button id="button">It's me, the button</button>
<br /><br />
<div id="toDoLists">Here is the to-do list:</div>

＆＃13;

希望它有所帮助。

点击事件 - 每次点击都添加html元素 - 纯粹的js

2 个答案: