以与 html 代码中相同格式的文本打印 Javascript 文本答案

【问题标题】：Print Javascript text in the same format text is in html code以与 html 代码中相同格式的文本打印 Javascript 文本
【发布时间】：2021-01-07 04:27:09
【问题描述】：

我正在尝试使用 html、javascript 和 css 制作我的第一个网站，但我有很多问题！我有这个代码：

<!DOCTYPE html>

<html lang="en">
   <head>
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <title>Mercedes Benz Dealership</title>
   </head>

   <body>

       <div id="result1">
         **<h2> Good day Buyer!</h2>**
       </div>

       <form onsubmit="greet(); return false">
           <input type ="text" id="name">
           <input type="submit">
       </form>

   </body>

 <script>

    function greet()
    {
        var name = document.querySelector("#name").value;
        if (name!=="")
        {
            document.querySelector("#result1").innerHTML ="Good day, " + name;
        }
    }
 </script>

 </html>

我想要文本的格式：

document.querySelector("#result1").innerHTML ="Good day, " + name;

与:

相同

<h2> Good day Buyer!</h2>

标题是一样的！但是当用户输入名称时，唯一的区别应该是“Good day,Alan”，例如与 h2 标题相同的粗体、字母大小和所有内容！

我怎样才能做到这一点？我一直在尝试，但没有成功。

非常感谢您的帮助！！真的

【问题讨论】：

你应该有 h2 标签的 id 而不是 div 标签。
作为一个建议，您可能想要一个在您键入时自动打招呼的输入 - stackoverflow.com/questions/65606607/…
非常感谢各位的帮助！！ :)

标签： javascript html css frontend

【解决方案1】：

只需指定所需的（正确的）选择器：

<!DOCTYPE html>

<html lang="en">

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
  <title>Mercedes Benz Dealership</title>
</head>

<body>

  <div id="result1">
    <h2> Good day Buyer!</h2>
  </div>

  <form onsubmit="greet(); return false">
    <input type="text" id="name">
    <input type="submit">
  </form>

</body>

<script>
  function greet() {
    var name = document.querySelector("#name").value;
    if (name !== "") {
      document.querySelector("#result1 h2").innerHTML = "Good day, " + name + "!";
    } //                  ploblem here ^^
  }
</script>

【讨论】：

【解决方案2】：

您可以尝试像这样添加...供参考 enter link description here

document.querySelector("#result1").innerHTML ="&lt;h2&gt;Good day "+name"+"&lt;/h2&gt;";

【讨论】：

【解决方案3】：

在您的 innerHTML 中写入您要打印的相同格式。然后就可以了。

document.querySelector("#result1").innerHTML ="**<h2>Good day, " + name+"!</h2>**";

【讨论】：

【解决方案4】：

问题是您选择的是 div，而不是 h2 元素。我通过获取 div 的第一个孩子来做到这一点。或者，您可以通过 innerHTML 手动插入，也可以将 ID 选择器移动到 h2 元素。

注意：我让它在输入时自动打招呼。

function greet() {
  var name = document.querySelector("#name").value;
  if (name !== "") {
    document.querySelector("#result1").children[0].innerHTML = "Good day, " + name + "!";
  } else {
    document.querySelector("#result1").children[0].innerHTML = "Good day, Buyer!";
  }
}
document.getElementsByTagName("INPUT")[0].addEventListener("input", greet)

<!DOCTYPE html>

<html lang="en">

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
  <title>Mercedes Benz Dealership</title>
</head>

<body>

  <div id="result1">
    **<h2> Good day Buyer!</h2>**
  </div>
  <input type="text" id="name">
</body>

</html>

【讨论】：

【解决方案5】：

从h2标签中的div中移动id，但是有很多不同的方式。

<div>
 **<h2 id="result1"> Good day Buyer!</h2>**
</div>

如果您尝试更改 div 的“Inner”，则此标签内的所有内容都将被替换。

【讨论】：