如何采用输入值形式并将其插入div内部html

Question

I'm trying to be able to create more div classes that act as buttons from a form submission. The form has 2 fields, a name for the button and a link(for example, the user inputs Example as the name the user inputs /pages/example for the link). The name is supposed to create the name for the button and the link input is supposed to create a link for that div class.

I got the part where the button adds a div class to the row but for some reason getting the value from the input and adding it to the div class innerhtml isn't working.

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/

The JSFiddle doesn't seem to work but on my website it does.

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'/>

hope this will help