如何向创建的元素添加内容？

问题描述 投票：0回答：1

所以我正在开发一个程序，允许您将书籍添加到列表中，然后为它们写评论。评论应该附加在它所属的列表项的下面，但我不知道该怎么做。我所知道的是我一直在使用

appendChild()
。我也试过在线搜索，但我真的找不到好的答案。我遇到的主要问题是列表项是我没有为其创建特定标识符的创建元素。所以我不确定如何解决这个问题。

在代码中，我尝试使用

document.body.appendChild(comment)
和
document.h3.appendChild(comment)
。我也尝试过使用函数参数，但我在那个领域不是很有经验，所以我也没有得到任何结果。本质上，我只是不确定在这里使用什么语法。

这是我的完整代码：

// listens for a click on the "add new" button
document.getElementById("new").addEventListener("click", newBook);
let newdiv = document.getElementById("newdiv");

// takes information about a new list item
function newBook() {
  // reveals the input boxes needed
  newdiv.style.display = "inline-block";
}

// listens for a click on the "add" button
document.getElementById("enternew").addEventListener("click", addItem);

// creates a new list item and adds it to the body of the webpage
function addItem() {
  // defines the new element as an h2 element
  let item = document.createElement("h2");
  item.setAttribute("class", "listItem");

  // gets the variable values from the user's input
  let bookname = document.getElementById("book").value;
  let authorname = document.getElementById("author").value;
  let seriesname = document.getElementById("series").value;

  // converts the user's input into text nodes
  let b = document.createTextNode('"' + bookname + '"');
  let a = document.createTextNode(", by " + authorname);
  let s = document.createTextNode(" (" + seriesname + ")");

  // creates buttons to initiate the review process and remove the list item
  let review = document.createElement("button");
  let remove = document.createElement("button");

  // creates a text node for the review button and appends it to the button element
  let rv = document.createTextNode("REVIEW");
  review.appendChild(rv);

  // creates a text node for the remove button and appends it to the button element
  let rm = document.createTextNode("✖");
  remove.appendChild(rm);
  
  // appends the text nodes to the h2 element
  item.appendChild(b);
  item.appendChild(a);
  item.appendChild(s);

  // appends the buttons to the h2 element
  item.appendChild(review);
  item.appendChild(remove);
  
  // adds the h2 element, including all the text nodes, to the body of the webpage
  document.body.appendChild(item);

  document.getElementById("book").value = "";
  document.getElementById("author").value = "";
  document.getElementById("series").value = "No series";

  // removes the list item when the "x" button is clicked
  remove.onclick = function() {
    document.body.removeChild(item);
  }

  // asks the user for review input and appends it to the list item
  review.onclick = function() {
    // gets input from the user for a star rating and their written review of the book
    let stars = prompt("Rate this book out from 1 to 5 (insert numerical values only):");
    let reviewText = prompt("Write a short review for this book:");

    // creates an h3 element to contain the review
    let comment = document.createElement("h3");

    // creates a text node to include in the h3
    let commentText = document.createTextNode("Stars: " + stars + "  " + reviewText);

    // appends the text node to the h3
    comment.appendChild(commentText);

    // appends the h3 to the list item
    //document.h3.appendChild(comment);
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Reading List</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive Mono">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=EB Garamond">
</head>

<body>
  <center>
    <!-- page header -->
    <h1 class = "header">~ YOUR READING LIST ~</h1>
    <br/> <br/>
    <!-- add new section for new book entry -->
    <button class = "df" id = "new">ADD NEW +</button>
    <br/>

    <!-- hidden division that contains input fields to add a new entry -->
    <div id = "newdiv">
      <p>Book name:</p>
      <input id = "book"/>
      <br/>
      <p>Author name:</p>
      <input id = "author"/>
      <br/> 
      <p>Series name (optional):</p>
      <input id = "series" value = "No series"/>
      <br/> <br/>
      <button class = "df" id = "enternew">ADD</button>
    </div>
  </center>
  
  <script src="script.js"></script>
  <!-- <script src="https://replit.com/public/js/replit-badge-v2.js" theme="teal" position="bottom-right"></script> -->
</body>

</html>

问题的部分是

review.onclick = function() {
部分。

我真的很感谢我在这方面得到的任何帮助。谢谢你，祝你有美好的一天！

javascript html css appendchild createelement
1个回答
1
投票

你需要

insertBefore
在评论结束时喜欢：

// listens for a click on the "add new" button
document.getElementById("new").addEventListener("click", newBook);
let newdiv = document.getElementById("newdiv");

// takes information about a new list item
function newBook() {
  // reveals the input boxes needed
  newdiv.style.display = "inline-block";
}

// listens for a click on the "add" button
document.getElementById("enternew").addEventListener("click", addItem);

// creates a new list item and adds it to the body of the webpage
function addItem() {
  // defines the new element as an h2 element
  let item = document.createElement("h2");
  item.setAttribute("class", "listItem");

  // gets the variable values from the user's input
  let bookname = document.getElementById("book").value;
  let authorname = document.getElementById("author").value;
  let seriesname = document.getElementById("series").value;

  // converts the user's input into text nodes
  let b = document.createTextNode('"' + bookname + '"');
  let a = document.createTextNode(", by " + authorname);
  let s = document.createTextNode(" (" + seriesname + ")");

  // creates buttons to initiate the review process and remove the list item
  let review = document.createElement("button");
  let remove = document.createElement("button");

  // creates a text node for the review button and appends it to the button element
  let rv = document.createTextNode("REVIEW");
  review.appendChild(rv);

  // creates a text node for the remove button and appends it to the button element
  let rm = document.createTextNode("✖");
  remove.appendChild(rm);

  // appends the text nodes to the h2 element
  item.appendChild(b);
  item.appendChild(a);
  item.appendChild(s);

  // appends the buttons to the h2 element
  item.appendChild(review);
  item.appendChild(remove);

  // adds the h2 element, including all the text nodes, to the body of the webpage
  document.body.appendChild(item);

  document.getElementById("book").value = "";
  document.getElementById("author").value = "";
  document.getElementById("series").value = "No series";

  // removes the list item when the "x" button is clicked
  remove.onclick = function() {
    document.body.removeChild(item);
  }

  // asks the user for review input and appends it to the list item
  review.onclick = function() {
    // gets input from the user for a star rating and their written review of the book
    let stars = prompt("Rate this book out from 1 to 5 (insert numerical values only):");
    let reviewText = prompt("Write a short review for this book:");

    // creates an h3 element to contain the review
    let comment = document.createElement("h3");

    // creates a text node to include in the h3
    let commentText = document.createTextNode("Stars: " + stars + "  " + reviewText);

    // appends the text node to the h3
    comment.appendChild(commentText);
    item.parentNode.insertBefore(comment, item.nextSibling);

    // appends the h3 to the list item
    //document.h3.appendChild(comment);
  }
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=EB Garamond">
<center>
  <!-- page header -->
  <h1 class="header">~ YOUR READING LIST ~</h1>
  <br/> <br/>
  <!-- add new section for new book entry -->
  <button class="df" id="new">ADD NEW +</button>
  <br/>

  <!-- hidden division that contains input fields to add a new entry -->
  <div id="newdiv">
    <p>Book name:</p>
    <input id="book" />
    <br/>
    <p>Author name:</p>
    <input id="author" />
    <br/>
    <p>Series name (optional):</p>
    <input id="series" value="No series" />
    <br/> <br/>
    <button class="df" id="enternew">ADD</button>
  </div>
</center>

我建议您使用

prompt
而不是
dialog，通过对话框您可以根据需要创建带有“最小/最大”的输入类型“数字”。

    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.