输出标题元素的 JavaScript 函数

Question

您好，我是一名初学者，正在寻求这方面的帮助。如何使 addHeading() 从下拉框中获取标题类型并从表单中获取文本，并创建/输出相应的标题元素？到目前为止，它只输出文本而不是具有相应大小的实际标题。这是我到目前为止所拥有的。我无法找到具体的例子或任何关于此的内容。提前致谢。

function addHeading() {
    var x = document.getElementById("heading");
    var headingText =
        document.getElementById("headingText").value;

    document.getElementById("divHeading").innerHTML = headingText;
}

function clearHeading() {
    document.getElementById('divHeading').innerHTML = headingText = [];
}

form {
  width: 500px;
  margin: 0px auto;
  border: 1px solid khaki;
  background-color: antiquewhite;
  border-collapse: collapse;
  padding: 10px;
  margin-bottom: 20px;
}
form h2 {
  margin: 0;
}
input {
  margin: 5px;
}

<form id='headingForm'>
  <h2>Heading Form</h2>
  <span>Heading Type:</span>
  <select id='heading' name='heading'>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
   </select>
  <br>
  <span>Text:</span>
  <input required='required' type='text' name='headingText' 
id='headingText'>
  <br>
  <input type='button' value='Add Heading' onclick='addHeading()'>
  <input type='button' value='Clear Heading' onclick='clearHeading()'>
  <div id='divHeading'></div>
</form>

Answer 1

希望这有助于FIDDLE:

function addHeading(){
    var x = document.getElementById("heading").value;
    var headingText = document.getElementById("headingText").value;
    document.getElementById("divHeading").innerHTML = '<h'+x+'>'+headingText+'</h'+x+'>';
}

function clearHeading() {
    document.getElementById('divHeading').innerHTML = '';
    //document.querySelector('#headingText').value = '';
}

form {
    width: 500px;
    margin: 0px auto;
    border: 1px solid khaki;
    background-color: antiquewhite;
    border-collapse: collapse;
    padding: 10px;
    margin-bottom: 20px;
}
form h2 {
    margin: 0;
}
input {
    margin: 5px;
}

<form id='headingForm'>
    <h2>Heading Form</h2>
    <span>Heading Type:</span>
    <select id='heading' name='heading'>
        <option value='1'>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
    </select>
    <br>
    <span>Text:</span>
    <input required='required' type='text' name='headingText' id='headingText'>
    <br>
    <input type='button' value='Add Heading' onclick='addHeading()'>
    <input type='button' value='Clear Heading' onclick='clearHeading()'>
    <div id='divHeading'></div>
</form>