通过 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