使用香草JavaScript在按钮点击上创建和追加新的div

Question

//hide element
function hide(x) {
  var elems = document.getElementsByClassName(x);
  for (var i = 0; i < elems.length; i += 1) {
    elems[i].style.display = 'none';
  }
}

//show element
function show(x) {
  var elems = document.getElementsByClassName(x);
  for (var i = 0; i < elems.length; i += 1) {
    elems[i].style.display = 'block';
  }
}

/* *************** listWrapper *************** */

var boardContainer = document.getElementsByClassName('board-container');
var newList = document.createElement('div'); //create new list-wrapper for holding lists
newList.className = 'new-list'; //assign id or class to div
newList.classList.add("list-wrapper"); //add another classname to the new-list div

//Check to see if a board-container exists and creates it if it does not exist and appends it to its parentNode
var boardContainerExist = true;
if (boardContainer === null) {
  boardContainer = document.createElement('div');
  boardContainer.class = 'board-container';
  // adds the newly created element to the DOM
  boardContainerExist = false;
}
for (var i = 0; i < boardContainer.length; i++) {
  document.body.appendChild(newList); //add list-wrapper to the body/ or to the DOM
  // document.getElementsByClassName("new-list") += "list-wrapper";
  boardContainer[i].insertBefore(newList, boardContainer[i].childNodes[0]); //append new-list before the first-child
  // document.getElementsByClassName('board-container')[0].appendChild(newList);
}
//create list-container
var listContainer = document.createElement('div');
listContainer.className = 'list-container';

//create list-head-container
var listHeadContainer = document.createElement('div');
listHeadContainer.className = 'list-head-container';

//create div to hold textarea
var textareaContainer = document.createElement('div');
textareaContainer.className = 'textarea-container';


//create textarea for lists
var textareaElement = document.createElement('textarea');
textareaElement.setAttribute("type", "text");
textareaElement.setAttribute("class", "textarea-title");
textareaElement.setAttribute("overflow", "break-word");
textareaElement.setAttribute("placeholder", "Enter list title...");


//create div container for ellipsis 
//Note: The icon with three dots is called an ellipsis
var ellipsisContainer = document.createElement('div');
ellipsisContainer.className = 'ellipsis-container';

// create list to hold ellipsis
var ellipsisLink = document.createElement('a');
ellipsisLink.className = 'ellipsisLink';
ellipsisLink.setAttribute('href', '#');
ellipsisLink.innerHTML = '...';

//Add inner elements
newList.appendChild(listContainer); //add list-container inside new-list
listContainer.appendChild(listHeadContainer); //add list-head-container inside list-container
listHeadContainer.appendChild(textareaContainer); //add textarea container inside list-head-holder
textareaContainer.appendChild(textareaElement); //add textarea container inside textarea-container
textareaContainer.appendChild(ellipsisContainer); //add ellipsis container inside textarea-container
ellipsisContainer.appendChild(ellipsisLink); //add ellipsis link inside ellipsis container

var titleTaker = document.getElementsByClassName('list-input').value;
textareaElement.innerHTML = titleTaker;

body {
  font-family: 'Roboto', sans-serif;
  font-family: 'Open Sans', sans-serif;
  color: rgb(12, 57, 83);
}


/* *************** boardWrapper *************** */

.board-wrapper {
  position: relative;
  /* flex-grow: 1;  */
  font-size: 14px;
}

.board-container {
  display: flex;
  flex-direction: row;
  background-color: transparent;
}

.list-wrapper.first-wrapper {
  width: 280px;
  background-color: rgb(237, 239, 240);
  border-radius: 3px;
  /*** for rounded corners ***/
  height: auto;
  margin-left: 10px;
}

.list-wrapper {
  width: 280px;
  background-color: rgb(237, 239, 240);
  border-radius: 3px;
  /*** for rounded corners ***/
}

div.list-wrapper:first-child {
  display: none;
  margin-left: 5px;
}

.list-content {
  height: 900px;
}

.list-content {
  background-color: blue;
  height: 100px;
  width: 280px;
}

form {
  /* padding: 5px; */
  display: flex;
  flex-direction: column;
}

a.list-links {
  text-decoration: none;
  color: rgb(255, 255, 255);
  padding: 10px 20px 10px 5px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

a.list-links:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

span.add-another-list {
  display: none;
}

.fa-plus {
  font-size: 14px;
}

span.link-selector {
  padding: 10px;
  /* background-color: rgba(0,0,0,0.3); */
}

.add-list-button-container {
  padding-top: 5px;
  padding-bottom: 2px;
}

input[type=text].list-input {
  display: block;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(127, 170, 199);
  border-radius: 3px;
  height: 30px;
  margin: 5px;
  box-shadow: 0 0 0 1px rgb(127, 170, 199);
  font-size: 14px;
  padding-left: 10px;
  display: none;
}

.add-list-button-container {
  margin: 0 5px 5px;
  display: none;
}

input[type=submit].list-input-button {
  color: rgb(255, 255, 255);
  background-color: #5aac44;
  box-shadow: 0 1px 0 0 #3f6f21;
  background-color: rgb(90, 172, 68);
  box-shadow: 0 1px 2px 0 rgb(46, 73, 39);
  border: none;
  font-size: 14px;
  height: 30px;
  padding-left: 14px;
  padding-right: 14px;
  margin-right: 10px;
  font-weight: 700;
}

.fa-times {
  color: rgb(131, 140, 145);
  font-size: 18px;
}

.textarea-container {
  display: flex;
  flex-direction: row;
}

textarea {
  display: block;
  word-wrap: break-word;
  overflow: hidden;
  padding: 5px 10px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(127, 170, 199);
  border-radius: 3px;
  font-size: 14px;
  outline: none;
  /* Removes the blue glow from around textarea */
  resize: none;
  /* Removes resize handle */
}

.textarea-title {
  box-shadow: 0 0 0 1px rgb(127, 170, 199);
  height: 20px;
  max-height: 120px;
  margin-top: 6px;
  margin-left: 10px;
  /* clear: right !important; */
}

.ellipsis-container {
  margin-top: 6px;
  margin-left: 47px;
  border-radius: 3px;
}

.ellipsis-container:hover {
  background-color: rgba(214, 218, 220, 0.8);
}

.ellipsis-container a.ellipsisLink {
  font-size: 21px;
  padding-left: 10px;
  padding-right: 10px;
  display: block;
  text-align: center;
  /* width: 16px; */
  line-height: 20px;
  text-decoration: none;
  color: rgb(131, 140, 145);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie-edge">

  <title></title>

  <!-- Link to CSS -->
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <!-- Link to Font-Awesome 5 -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

  <!--Link to google fonts - Roboto and Open sans (400, 400 italics, 700 bold, 700 italics)-->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Roboto" rel="stylesheet">
</head>

<body>

  <!-- *************** boardWrapper *************** -->
  <div class="board-wrapper">
    <div class="board-container">
      <!-- New lists are being created dynamically via javascript and are being placed here -->
      <div class="list-wrapper first-wrapper">
        <form onsubmit="return show('list-wrapper');">
          <a class="list-links" href="#" onclick="hide('list-links'); show('list-input'); show('add-list-button-container'); ">
            <span class="link-selector">
              <span class="plus-icon"><i class="fas fa-plus"></i></span>
            <span class="add-list">Add list</span>
            <span class="add-another-list">Add another list</span>
            </span>
          </a>
          <input type="text" class="list-input" required minlength="1" autocomplete="off" maxlength="500" placeholder="Enter list title...">
          <div class="add-list-button-container">
            <input class="list-input-button" type="submit" value="Add List" required minlength="1" maxlength="500" placeholder="Enter list title...">
            <a class="list-close-button" href="#"><i class="fas fa-times"></i></a>
          </div>
        </form>
        <!-- end of form -->
        <!-- list content -->
      </div>
      <!-- end of list-wrapper -->
    </div>
    <!-- end of board-container -->
  </div>
  <!-- end of board-wrapper -->
  <!-- Link to JavaScript -->
  <script src="js/scripts.js"></script>
</body>

</html>

其他答案，但没有一个涵盖我所有的问题。

这就是我想做的

我正在开发一个仅使用HTML，CSS和原始JavaScript克隆Trello的项目。我是javaScript的新手，我试图创建多个列表，并从创建动态列表开始。

这是应该发生的情况：

 1.每次用户将文本写入输入字段并单击***添加列表***时，都应添加一个新列表（实际上是一个具有文本区域的div）（在屏幕左侧）。按钮。  2.用户添加的输入应转移到新列表中，作为该列表的标题。此标题应该是可编辑的（意味着用户应该可以随时更改标题文本。

这是我遇到的问题：

 1.当前代码仅允许我添加一个列表。 2.我也无法将文本从输入字段传输到新列表（在文本区域中）---现在正在传输的是单词“ undefined”。 3.同样，列表和按钮在单击后也会消失。

有人建议我为列表使用唯一的ID，但我还不知道该怎么做。

链接到Codepen上的代码：https://codepen.io/Joanc/pen/MZjJvy

非常感谢并期待您的帮助

//hide element
function hide(x) {
  var elems = document.getElementsByClassName(x);
  for (var i = 0; i < elems.length; i += 1) {
    elems[i].style.display = 'none';
  }
}

//show element
function show(x) {
  var elems = document.getElementsByClassName(x);
  for (var i = 0; i < elems.length; i += 1) {
    elems[i].style.display = 'block';
  }
}

/* *************** listWrapper *************** */

var boardContainer = document.getElementById('board-container');
var newList = document.createElement('div'); //create new list-wrapper for holding lists
newList.className = 'new-list'; //assign id or class to div
newList.classList.add("list-wrapper"); //add another classname to the new-list div

document.body.appendChild(newList); //add list-wrapper to the body/ or to the DOM
var boardContainer = document.getElementById('board-container');
boardContainer.insertBefore(newList, boardContainer.childNodes[0]); //append new-list before the first-child
// 
//create list-container
var listContainer = document.createElement('div');
listContainer.className = 'list-container';

//create list-head-container
var listHeadContainer = document.createElement('div');
listHeadContainer.className = 'list-head-container';

//create div to hold textarea
var textareaContainer = document.createElement('div');
textareaContainer.className = 'textarea-container';


//create textarea for lists
var textareaElement = document.createElement('textarea');
textareaElement.setAttribute("type", "text");
textareaElement.setAttribute("class", "textarea-title");
textareaElement.setAttribute("overflow", "break-word");
textareaElement.setAttribute("placeholder", "Enter list title...");


//create div container for ellipsis 
//Note: The icon with three dots is called an ellipsis
var ellipsisContainer = document.createElement('div');
ellipsisContainer.className = 'ellipsis-container';

// create list to hold ellipsis
var ellipsisLink = document.createElement('a');
ellipsisLink.className = 'ellipsisLink';
ellipsisLink.setAttribute('href', '#');
ellipsisLink.innerHTML = '...';

//Add inner elements
newList.appendChild(listContainer); //add list-container inside new-list
listContainer.appendChild(listHeadContainer); //add list-head-container inside list-container
listHeadContainer.appendChild(textareaContainer); //add textarea container inside list-head-holder
textareaContainer.appendChild(textareaElement); //add textarea container inside textarea-container
textareaContainer.appendChild(ellipsisContainer); //add ellipsis container inside textarea-container
ellipsisContainer.appendChild(ellipsisLink); //add ellipsis link inside ellipsis container

//grabbing user input and assigning it to title textarea
var titleTaker = document.getElementsByClassName('list-input').value;
textareaElement.innerHTML = titleTaker;

body {
  font-family: 'Roboto', sans-serif;
  font-family: 'Open Sans', sans-serif;
  color: rgb(12, 57, 83);
}


/* *************** boardWrapper *************** */

.board-wrapper {
  position: relative;
  /* flex-grow: 1;  */
  font-size: 14px;
}

#board-container {
  display: flex;
  flex-direction: row;
}

.list-wrapper.first-wrapper {
  width: 280px;
  background-color: rgb(237, 239, 240);
  border-radius: 3px;
  /*** for rounded corners ***/
  height: auto;
  margin-left: 10px;
}

.list-wrapper {
  width: 280px;
  background-color: rgb(237, 239, 240);
  border-radius: 3px;
  /*** for rounded corners ***/
}

div.list-wrapper:first-child {
  display: none;
  margin-left: 5px;
}

.list-content {
  height: 900px;
}

#board-container {
  background-color: transparent;
}

.list-content {
  background-color: blue;
  height: 100px;
  width: 280px;
}

form {
  /* padding: 5px; */
  display: flex;
  flex-direction: column;
}

a.list-links {
  text-decoration: none;
  color: rgb(255, 255, 255);
  padding: 10px 20px 10px 5px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

a.list-links:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

span.add-another-list {
  display: none;
}

.fa-plus {
  font-size: 14px;
}

span.link-selector {
  padding: 10px;
  /* background-color: rgba(0,0,0,0.3); */
}

.add-list-button-container {
  padding-top: 5px;
  padding-bottom: 2px;
}

input[type=text].list-input {
  display: block;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(127, 170, 199);
  border-radius: 3px;
  height: 30px;
  margin: 5px;
  box-shadow: 0 0 0 1px rgb(127, 170, 199);
  font-size: 14px;
  padding-left: 10px;
  display: none;
}

.add-list-button-container {
  margin: 0 5px 5px;
  display: none;
}

input[type=submit].list-input-button {
  color: rgb(255, 255, 255);
  background-color: #5aac44;
  box-shadow: 0 1px 0 0 #3f6f21;
  background-color: rgb(90, 172, 68);
  box-shadow: 0 1px 2px 0 rgb(46, 73, 39);
  border: none;
  font-size: 14px;
  height: 30px;
  padding-left: 14px;
  padding-right: 14px;
  margin-right: 10px;
  font-weight: 700;
}

.fa-times {
  color: rgb(131, 140, 145);
  font-size: 18px;
}

.textarea-container {
  display: flex;
  flex-direction: row;
}

textarea {
  display: block;
  word-wrap: break-word;
  overflow: hidden;
  padding: 5px 10px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(127, 170, 199);
  border-radius: 3px;
  font-size: 14px;
  outline: none;
  /* Removes the blue glow from around textarea */
  resize: none;
  /* Removes resize handle */
}

.textarea-title {
  box-shadow: 0 0 0 1px rgb(127, 170, 199);
  height: 20px;
  max-height: 120px;
  margin-top: 6px;
  margin-left: 10px;
  /* clear: right !important; */
}

.ellipsis-container {
  margin-top: 6px;
  margin-left: 47px;
  border-radius: 3px;
}

.ellipsis-container:hover {
  background-color: rgba(214, 218, 220, 0.8);
}

.ellipsis-container a.ellipsisLink {
  font-size: 21px;
  padding-left: 10px;
  padding-right: 10px;
  display: block;
  text-align: center;
  /* width: 16px; */
  line-height: 20px;
  text-decoration: none;
  color: rgb(131, 140, 145);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie-edge">

  <title></title>

  <!-- Link to CSS -->
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <!-- Link to Font-Awesome 5 -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

  <!--Link to google fonts - Roboto and Open sans (400, 400 italics, 700 bold, 700 italics)-->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Roboto" rel="stylesheet">
</head>

<body>

  <!-- *************** boardWrapper *************** -->
  <div class="board-wrapper">
    <div id="board-container">
      <div class="list-wrapper first-wrapper">
        <form onsubmit="return show('list-wrapper');">
          <a class="list-links" href="#" onclick="hide('list-links'); show('list-input'); show('add-list-button-container'); ">
            <span class="link-selector">
              <span class="plus-icon"><i class="fas fa-plus"></i></span>
            <span class="add-list">Add list</span>
            <span class="add-another-list">Add another list</span>
            </span>
          </a>
          <input type="text" class="list-input" required minlength="1" autocomplete="off" maxlength="500" placeholder="Enter list title...">
          <div class="add-list-button-container">
            <input class="list-input-button" type="submit" value="Add List" required minlength="1" maxlength="500" placeholder="Enter list title...">
            <a class="list-close-button" href="#"><i class="fas fa-times"></i></a>
          </div>
        </form>
        <!-- end of form -->
        <!-- list content -->
      </div>
      <!-- end of list-wrapper -->
    </div>
    <!-- end of board-container -->
  </div>
  <!-- end of board-wrapper -->
  <!-- Link to JavaScript -->
  <script src="js/scripts.js"></script>
</body>

</html>

Answer 1

琼，因为需要对JavaScript进行实质性的更改，所以我为您正在处理的代码创建了一个更简单的版本。带有注释以指出功能如何工作。我希望这会有所帮助。

// This method creates a single work item on the board and assigns click methods.
var createNewWorkItem = function(itemContainer) {
  if(itemContainer && (typeof itemContainer.appendChild !== undefined)) {

    var workItemActionPanel = document.createElement('div');
    workItemActionPanel.setAttribute('class', 'work-item-panel' );
    workItemActionPanel.onclick = closeWorkItemActionPanel;
    
    var workItem = document.createElement('div');
    workItem.setAttribute( 'class', 'work-item' );
    workItem.onclick = showWorkItemActionPanel;
    
    workItem.appendChild(workItemActionPanel);
    itemContainer.appendChild(workItem);    
  }
};

// This is called when user clicks the action panel, closes it and calls to create
// a new work item
var closeWorkItemActionPanel = function(e) {
  e.currentTarget.style.display = 'none';
  var board = document.getElementById("workBoard");
  createNewWorkItem(board);
  e.stopPropagation() ;
};

// This is called when user clicks on a work item and shows the action panel
var showWorkItemActionPanel = function(e) {
  var actionPanel = e.currentTarget.childNodes[0];
  if(actionPanel.className !== 'work-item-panel') {
    e.currentTarget.childNodes.forEach(node => {
      if(node.className == 'work-item-panel') actionPanel = node;
    });
  }

  actionPanel.style.display = 'inline-block';
};

// Initialize when the document has loaded.
(function(){
  var board = document.getElementById("workBoard");
  createNewWorkItem(board);

})();

.work-board {
  background-color: aqua;
  height: 500px;
  border: 3px solid blue;
  border-radius: 5px;
}

.work-item {
  margin: 5px;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: coral;
  border-radius: 5px;
}

.work-item-panel {
  margin: 5px;
  height: 40px;
  width: 40px;
  display: none;
  background-color: red;
}

    <div id="workBoard" class="work-board">


    </div>

我正在使用repl编写此代码，您可以在此处进行分叉和玩游戏：https://repl.it/@PaulThomas1/PTSimpleWorkBoardSample