大家好，我是Web开发的新手，在Javascript方面更是如此。我练习了一些Javascript来学习 codepen.io，我有一个问题：
我用 Javacript 方法创建了一个元素createElement()=> 该元素是一个div。我已经设计了它的样式=>它正在工作
我还在我的HTML文件中创建了一个带有按钮的文本区域，并将<textarea>的值放入我之前创建的div中(使用Javascript(。
文本/值(文本区域(位于div (innerHTML( 内部，它适用于这部分，但我想应用一些样式(使用.style="{some styles goes here}"或方法classList.add("classX")，但其中任何一个都不起作用，就像它们都被忽略了一样。
let div = document.createElement('div');
document.body.appendChild(div);
div.classList.add("test");
// Ici j'attrape l'INPUT
let inputText = document.querySelector("#txtarea");
//Ici j'atrappe le boutton => qui me permettra plus tard d'envoyer la valeur de ce que l'utilisateur aura écris dans l'input précédent au sen de la div à fond Jaune
let btn_send = document.querySelector("button");
//Processus d'envoi de la valeur
btn_send.addEventListener("click", function() {
// Variable me permettant de mettre la main sur la valeur de l'input
let value_style = inputText.value;
//Intégration du text avec InnerHTML dans la div
setTimeout
(function() {
div.innerHTML = value_style;
}, 1000);
// ajout de style au texte que l'on va envoyer dans la Div
//L'on vide l'input de sa valeur => pour renvoyer une nouvellle valeur
inputText.value = "";
})* {
margin: 0;
box-sizing: border-box;
}
h1 {
background: red;
}
.test {
background-color: yellow;
height: 45vh;
width: 90%;
border: 1px outset black;
margin: 11vh auto;
}
.style {
text-align: center;
font-family: 'Helvetica', sans-serif;
color: #64a;
padding: 10px;
border: 1px solid blue;
background-color: #66e;
}<!DOCTYPE html>
<html lang="fr">
<head>
<title>Test</title>
</head>
<meta charset="utf-8">
<body>
<header></header>
<footer></footer>
<label>Tapez quelque chose à afficher dans la div à fond jaune:</label>
<textarea id="txtarea" placeholder="..."></textarea>
<button>Appuyez pour envoyer</button>
</body>
</html>您的.style类未设置为任何内容。如果你想设置新添加的文本的样式，你需要用一些东西包装它(在我的例子中，我把它包装在一个span中(。
您可以像使用createElement创建div相同的方式创建span。在我的示例中，我只是让它在 innerHTML 中添加一个字符串，该字符串将呈现为元素。
let div = document.createElement('div');
document.body.appendChild(div);
div.classList.add("test");
// Ici j'attrape l'INPUT
let inputText = document.querySelector("#txtarea");
//Ici j'atrappe le boutton => qui me permettra plus tard d'envoyer la valeur de ce que l'utilisateur aura écris dans l'input précédent au sen de la div à fond Jaune
let btn_send = document.querySelector("button");
//Processus d'envoi de la valeur
btn_send.addEventListener("click", function() {
// Variable me permettant de mettre la main sur la valeur de l'input
let value_style = inputText.value;
//Intégration du text avec InnerHTML dans la div
setTimeout
(function() {
div.innerHTML += `<span class="style">${value_style}</span>`;
}, 1000);
// ajout de style au texte que l'on va envoyer dans la Div
//L'on vide l'input de sa valeur => poir renvoyer une vouvellle valeur
inputText.value = "";
})* {
margin: 0;
box-sizing: border-box;
}
h1 {
background: red;
}
.test {
background-color: yellow;
height: 45vh;
width: 90%;
border: 1px outset black;
margin: 11vh auto;
}
.style {
text-align: center;
font-family: 'Helvetica', sans-serif;
color: #64a;
padding: 10px;
border: 1px solid blue;
background-color: #66e;
}<!DOCTYPE html>
<html lang="fr">
<head>
<title>Test</title>
</head>
<meta charset="utf-8">
<body>
<header>
</header>
<footer>
</footer>
<label>Tapez quelque chose à afficher dans la div à fond jaune:</label>
<textarea id="txtarea" placeholder="..."></textarea>
<button>Appuyez pour envoyer</button>
</body>
</html>