如何获取表单输入值并插入到 div 内部 html

Question

我正在尝试创建更多的 div 类，这些类在表单提交中充当按钮。该表单有 2 个字段，一个按钮名称和一个链接（例如，用户输入 Example 作为用户为链接输入 /pages/example 的名称）。该名称应该为按钮创建名称，链接输入应该为该 div 类创建一个链接。

我得到了按钮将 div 类添加到行的部分，但由于某种原因，从输入中获取值并将其添加到 div 类 innerhtml 不起作用。

HTML：

<button onclick="showDiv('toggle')" class="addbutton">
    <img src="">
</button>
<div id="toggle" class="buttonform">
    <form id="form1" class="form1">
        <input type="button" value="x" class="close1"></input>
        <input class="buttonname" id="buttonname" type="text" placeholder="Button Name" onkeydown="myFunction()">
        < /br>
            <input class="buttonlink" id="buttonlink" type="text" placeholder="Link, ex:/pages/personal" onchange="myFunction()">
            <input class="addbutton1" type="button" value="Submit"></input>
    </form>
</div>
<div class="categories">
    <ul class="onlinecategories"> <a href=""><li class="oclist">1</li></a>
 <a href=""><li class="oclist">2</li></a>
 <a href=""><li class="oclist">3</li></a>
 <a><li class="oclist" id="addclass" contenteditable="true" style="display:none;"></li></a>

    </ul>
</div>

CSS：

      #toggle {
      z-index:15;
  }
  .madebutton:hover {
      opacity:.8;
  }
  .addbutton:hover {
      opacity:.9;
  }
  .categories {
      width:100%;
  }
  .onlinecategories {
      width:100%;
  }
  .oclist {
      width:90%;
      height:30px;
      list-style:none;
      border-radius:10px;
      text-align:center;
      margin-bottom:10px;
      cursor:pointer;
  }
  .onlinecategories li {
      background: rgb(244, 71, 71);
  }
  li.oclist:hover {
      opacity:.8;
  }
  .addbutton {
      margin-top:7%;
      display:block;
      width:50px;
      height:30px;
      background-color:green;
      text-align:center;
      float:right;
      border-radius:5px;
  }
  .buttonform {
      display:none;
      float:right;
      height:100px;
      width:200px;
  }
  .close1 {
      float:right;
      width:20px;
      text-align:center;
      background-color:red;
      cursor:pointer;
  }
  .addbutton1 {
      text-align:center;
      background-color:green;
      cursor:pointer;
      z-index:100;
  }

jquery：

    $('.addbutton1').click(function () {
    $('.oclist:last').before('<div class="oclist" id="addclass" style="color:black; margin-bottom:12px;border-radius:10px; max-height:32px; background-color:rgb(244, 71, 71); text-align:center; font-family:Cardo; font-style:italic;"type="button" </div><span class="remove" style="z-index:10;"><img style="margin-top:1%; float:right; cursor:pointer; margin-right:2%;"src=""></img></span>');
});
$('.categories').on('click', '.remove', function () {
    $(this).parent().remove();
});



function showDiv(toggle) {
    document.getElementById(toggle).style.display = 'block';
}
$(".close1").click(function () {
    $('#toggle').hide();
});

function myFunction() {

    $("#form1").submit(function () {
        var input_taker = document.getElementById('buttonname').value;
        document.getElementById('testig').innerHTML = input_taker;
    });
}

JSFiddle：http://jsfiddle.net/kunwarsethi/dLv0oxeb/1/

JSFiddle 似乎不起作用，但在我的网站上却可以。

Answer 1

<script type="text/javascript">
function changeText(){
    document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p> 
<input type='button' onclick='changeText()' value='Change Text'/>

希望这会有所帮助