js で要素を新規作成し、そこにタグを追加したい

タイトルにあるように、JSで要素を作成し、そこにタグを追加したいです

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10    
11    <button id="btn">押してね</button>
12
13    <script>
14        window.onload = function() {
15            const btn = document.getElementById("btn");
16            btn.addEventListener("click", () => {
17                newDiv = document.createElement("div");
18                newDiv.classList.add("simple");
19
20                newDiv.innerHtml = "<p>" +
21                    "test dayo" +
22                    "</p>";
23
24                // newDiv.innerText = "<p>" +
25                //     "test dayo" +
26                //     "</p>";
27
28                document.body.appendChild(newDiv)
29            });
30        }
31    </script>
32
33</body>
34</html>

innerText でテキストは挿入できたのでいいのですが、作成したHTMLが挿入できません。
要素の新規作成と、その子要素の作成を同時に行うことはできないのでしょうか？
よろしくお願いします

行動規範の内容に同意します

回答2件

とりあえず
innerHtml
↓↓↓
innerHTML

投稿2022/01/14 06:51

yambejp

総合スコア117678

ベストアンサー

これでどうでしょうか。

JavaScript
1var newElement = document.createElement("p");
2var newContent = document.createTextNode("test dayo");
3newElement.appendChild(newContent);
4newDiv.appendChild(newElement);