JQuery append HTML using class tags onclick

user_13952354 0
Viewed 83

Im sorry if this is a bit of a novice quest. I've only recently started learning. I'm trying to use jQuery to append a series of input text boxes onto my website but nothing I've tried has worked so far.

HTML doc

<!DOCTYPE html>
<html lang="en">
<div class="background">
<link rel="stylesheet" href="style.css">
<script src="testjavascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<head>
  <titleTest Web App</title>
  <h1>Test Number 1</h1>
</head>

<button onclick="meth_hide_show()">Hide/Show</button>
<div id="methodology" class="methodology">
<label for="constr_method">Choose a Renewal Methodology:</label>
<select name="constr_method" id="constr_method">
  <option value="Pipe_crack">Pipe Crack</option>
</select>

<br>

<label for="constr_method">Renewal Location:</label>
<select name="location" id="location">
  <option value="N/S">Nature Strip</option>
  <option value="Road">Road</option>
  <option value="n/s_rd">Nature Strip & Road</option>
</select>

<form>
  <label for="meters">Number of Meters:</label>
  <input type="number" id="ren_meter" name="ren_meter">
</form>
</div>

<button id="save_meth" onclick="appendmethd()">Add Methodology</button>

<div class="meth_append">

</div>

</div>
</html>

Javascript doc:

function meth_hide_show() {
  var x = document.getElementById("methodology");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function appendmethd() {
    var meth=document.getElementById("methodology")
    $("meth_append").append(meth)
}
html jquery javascript
1 Answers

Try this

function meth_hide_show() {
//retrieve the jquery object
  var x = $("#methodology");

  if (x.is(':visible')) {
//if its visible, hide it
    x.hide();
  } else {
//else show it
    x.show();
  }
}

function appendmethd() {
    var meth=$("#methodology");
    $(".meth_append").append(meth);
}
user_22617330
Related