通過 javascript，如何將一個 div 添加到我的 html 腳本中，其中包含另一個 div？

Question

我正在嘗試創建一個筆記應用程序，用戶可以在其中按下一個按鈕，鍵入文本，這將生成一個由文本組成的框，可以在屏幕上拉伸和拖動。 我遇到麻煩的部分是當按下按鈕並插入文本時，第一個 div 將生成，但子 div 沒有正確生成並且行為很奇怪。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Filler/Style.css">
</head>
<body>
    
    <button type="button" id="button">Add Filler</button>

<script src="Sketch.js"></script>
<script src="Filler/Sketch.js"></script>
<script src="Sidebar/Sketch.js"></script>
</body>
</html>

CSS

#mydiv {
    position: absolute;
    background-color: pink;
    border: 1px solid black;
    width: 200px;
    height: 200px;
    z-index: 4;

    /* div able to be resised and scroll bar will be added if contents is too long .hidden*/
    resize: both;
    overflow: scroll;

    /* create rounded borders */
    border-radius: 15px;
    -moz-border-radius: 15px;
    text-align: center;
}

#mydivheader {
    cursor: move;
    z-index: 10;
}

Javascript

var myButton = document.getElementById("button");

myButton.addEventListener("click", clicked);


function clicked(){
    const content = prompt("Div Contents");
    const div = document.createElement('div');
    const div2 = document.createElement('div');

    div.id = "mydiv";
    div.textContent = content;

    div2.id = "mydivheader";
    div2.style = "width: 100%; height: 15px;";
    div2.textContent = content;

    document.body.append(div);
    div.appendChild(div2);
}

Answer 1

我沒有正確理解你的問題。 是內容生成兩次的問題。 就像父 div 中的一個和子 div 中的另一個一樣。 如果是這樣試試這個

function clicked(){
const content = prompt("Div Contents");
const div = document.createElement('div');
const div2 = document.createElement('div');

div.id = "mydiv";

div2.id = "mydivheader";
div2.style = "width: 100%; height: 15px;";
div2.textContent = content;

document.body.append(div);
div.appendChild(div2);

}

通過 javascript，如何將一個 div 添加到我的 html 腳本中，其中包含另一個 div？

問題描述

1 個解決方案

解決方案1
0 2022-12-29 08:24:45

通過 javascript，如何將一個 div 添加到我的 html 腳本中，其中包含另一個 div？

問題描述

1 個解決方案

解決方案1 0 2022-12-29 08:24:45

解決方案1
0 2022-12-29 08:24:45