问如何在按钮单击时使用javascript添加预先制作的div
EN

Stack Overflow用户

提问于 2018-09-18 00:47:34

回答 2查看 1.3K关注 0票数 0

我有一个网页，看起来像这样

我希望每次按下保存备注时，右边都会出现一个新的卡片，上面有更新的标题和描述。

这是我写的html代码

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 rightLine">
            <h1 class="bottomLine">Note List</h1>
            <div class="active-cyan-3 active-cyan-4 mb-4">
                <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <div id ="cards"></div>
        </div>
        <div class="col-md-8">
            <h1 class="bottomLine">Note</h1>
            <div class="active-cyan-3 active-cyan-4 mb-4">
                <input class="form-control" id="title" type="text" placeholder="Enter title here" aria-label="Search">
            </div>
            <div class="active-cyan-3 active-cyan-4 mb-4 bottomLine">
                <textarea class="form-control" id="description" rows="15" placeholder="Enter descirption here"></textarea>
            </div>
            <div>
                <button type="button" id="removenote" class="btn btn-outline-danger">Remove Note</button>
                <button type="button" id="savenote" class="btn btn-outline-success" onclick="x.saveNote()">Save Note</button>
                <button type="button" id="addnote" class="btn btn-outline-primary" onclick="x.addNote()">Add Note</button>
            </div>
        </div>
    </div>
</div>

这张卡的代码中有id=card，这是我每次都想要的新东西。

这是我写的javascript

 class Note {
    constructor(name, description) {
        this.name = name;
        this.description = description;
    }
}

class NoteComponent {
    constructor() {
        this.listOfNotes = [];
    }

    saveNote() {
        let title = document.getElementById("title").value;
        let description = document.getElementById("description").value;
        let currentNote = new Note(title, description);
        this.listOfNotes.push(currentNote);

        getCardHTML(this.listOfNotes);

        this.listOfNotes.forEach((arrayItem) => {
            console.log('name is ' + arrayItem.name + ' description is ' + arrayItem.description);
        });
    }

    addNote() {
        let title = document.getElementById("title").value = "";
        let description = document.getElementById("description").value = "";
    }


    filterList(noteList, Query) {}
}

/*when the specific note card clicked the title and description places will be populated*/
function showNote(){
    console.log('the onclcik worked fine');
}

function getCardHTML(arr) {
    let divOfCards = document.getElementById('cards');
    while (divOfCards.firstChild) {
        divOfCards.removeChild(divOfCards.firstChild);
    }
    for (let i = 0; i < arr.length; i++) {
        let div = document.getElementById("cards");
        let anchor = document.createElement("div");
        anchor.className = "list-group-item list-group-item-action flex-column align-items-start";
        let innerDiv = document.createElement("div");
        innerDiv.className = "d-flex w-100 justify-content-between";
        let divHeading = document.createElement("h5");
        divHeading.className = "mb-1";
        divHeading.innerHTML = arr[i].name;
        let divPara = document.createElement("p");
        divPara.className = "mb-1";
        divPara.innerHTML = arr[i].description;
        //anchor.href = "#";
        anchor.onclick = showNote();

        innerDiv.appendChild(divHeading);
        anchor.appendChild(innerDiv);
        anchor.appendChild(divPara);
        div.appendChild(anchor);
    }
}

let x = new NoteComponent();

保存新便笺后，便会显示在左侧。我不明白当点击左边的卡片时，笔记、标题和描述怎么会占据右边的位置。

javascript

html

回答 2

Stack Overflow用户

发布于 2018-09-18 01:14:43

有一个名为createElement()的JavaScript函数，它允许您创建一个HTML元素并将其分配给一个变量。一旦创建了元素，只需将内容附加到该元素，然后将该元素附加到HTML元素。

例如：

var body = document.getElementsByTagName('body');
var title = document.getElementById("title").value;
var description = document.getElementById("description").value;
var div = document.createElement("div");
var h1 = document.createElement("h1");
var p = document.createElement("p");
// assign values to elements
h1.textContent = title;
p.textContent = description;
// append elements to div
div.appendChild(h1);
div.appendChild(p);
// append div to body
body.appendChild(div);

您也可以使用createTextNode而不是textContent。

票数 0

Stack Overflow用户

发布于 2018-09-18 01:15:32

遍历listOfNodes并创建card并将其附加到div。每当你点击savenote时，卡片就会出现。这是一个有效的演示。

class Note{
    constructor(name, description) {
        this.name = name;
        this.description = description;
      }
}

let listOfNotes = [];

class NoteComponent{
    constructor(){}

    filterList(noteList,Query){}
}

document.getElementById("savenote").addEventListener("click", function(){
  
    let title = document.getElementById("title").value;
    let description = document.getElementById("description").value;
    let currentNote = new Note(title,description);
    listOfNotes.push(currentNote);
    var newNode = document.getElementById("card");
    listOfNotes.forEach((arrayItem) => {
      console.log(arrayItem.name);
      
      var name = document.createElement("h5");
      var nameText = document.createTextNode(arrayItem.name);
      name.appendChild(nameText);
      
      var description = document.createElement("p");
      var desc = document.createTextNode(arrayItem.description);
      description.appendChild(desc);
      
      var card_body = document.createElement("div");
      card_body.className = "card_body";
      
      card_body.appendChild(name);
      card_body.appendChild(description);
      
      var card = document.createElement("div");
      card.className = "card";
      
      card.appendChild(card_body);
      
      var aTag = document.createElement("a");
      aTag.className="custom-card";
      aTag.setAttribute("id", "card");
      aTag.appendChild(card);
      
      var cardDiv = document.getElementById("card");
      cardDiv.appendChild(aTag);
      
      
    });
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
        <div class="row">
            <div class="col-md-4 rightLine">
                <h1 class="bottomLine">Note List</h1>
                <div class="active-cyan-3 active-cyan-4 mb-4">
                    <input class="form-control" type="text" placeholder="Search" aria-label="Search">
                </div>
              <div id="card">
                <a href="#" id="card" class="custom-card">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        </div>
                    </div>
                </a>
              </div>
            </div>
            <div class="col-md-8">
                <h1 class="bottomLine">Note</h1>
                <div class="active-cyan-3 active-cyan-4 mb-4">
                    <input class="form-control" id="title" type="text" placeholder="Enter title here" aria-label="Search">
                </div>
                <div class="active-cyan-3 active-cyan-4 mb-4 bottomLine">
                    <textarea class="form-control" id="description" rows="15" placeholder="Enter descirption here"></textarea>
                </div>
                <div>
                    <button type="button" id="removenote" class="btn btn-outline-danger">Remove Note</button>
                    <button type="button" id="savenote" class="btn btn-outline-success">Save Note</button>
                    <button type="button" id="addnote" class="btn btn-outline-primary">Add Note</button>
                </div>
            </div>
        </div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    </div>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52372388

复制

相似问题

问如何在按钮单击时使用javascript添加预先制作的div
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在按钮单击时使用javascript添加预先制作的divEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在按钮单击时使用javascript添加预先制作的div
EN