Parsing complete HTML block with JavaScript

Question

What is my plan: Every field should contain an input and a select dropdown. I thought it would be smart to insert this element with JavaScript/jQuery (so they can be edited in one place).

Found this solution and it works but not the way I wanted. It passes my HTML block as a string and didn't interpret it as an HTML statement.

Any possible solutions? I found something with $("#myDiv").html(result); - could this help me?

function selectBuilder(){
    var node = document.getElementById('select');
    var newNode = document.createElement('div');
    newNode.appendChild(document.createTextNode('<div class=\"select\"><select><option>--Select--</option><option>Hello 1</option><option>Hello 2</option><option>Hello 3</option><option>Hello 4</option></select><div class=\"select_arrow\"></div></div>'));
    node.appendChild(newNode);
}

body {
    margin: 0 auto;
    width: 100%;
    font-family: LatoLatin,Arial,sans-serif;
}

h1{
    text-align: center;
}

.tableContainer{
    width: 95%;
    display: inline-flex;
    justify-content: center;
}
.menuNumber{
    width: 50px;
}

.menuTable {
    border-collapse:collapse;
    border-spacing:0;
    width: 100%;
    border: 1px solid grey;
}

.menuTable td{
    width: 100px;
    text-align: center;
    font-size:14px;
    border: 1px solid grey;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}

.menuTable th{
    width: auto;
    border: 1px solid grey;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}

.menuContent{
    height: 150px;
}

.salatContent{
    height: 100px;
}

.menuDesc{
    display: table;
    height: 110px;
    text-align: center;
    width: 100%;
}

.select {
    display: grid;
    width: 100%;
    height: 40px; 

}

.menuDescItem{
    display: table-cell;
    vertical-align: middle;
    width: inherit;
    height: 110px;
}

<html>
<head>
    <link rel="stylesheet" href="css.css">
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script type="text/javascript" src="js.js"></script>

</head>
<body onload="selectBuilder()">
<h1>Speiseplan</h1>
    <div class="tableContainer" >
    <table class="menuTable">
      <tr>
        <th class="menuNumber"></th>
        <th class="">Montag</th>
        <th class="">Dienstag</th>
        <th class="">Mittwoch</th>
        <th class="">Donnerstag</th>
        <th class="">Freitag</th>
      </tr>
      <tr class = "menuContent">
        <td class="">1</td>
        <td class="tg-031e">
            <div class = "menuDesc">
                <input type="textarea" class="menuDescItem" name="menuOneDescMonday" autofocus placeholder="Menu 1 Montag" >
            </div>
            <div id="select"><!-- html block should be placed here e.g. --></div> 
        </td>
        <td><div class=""></div></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
      </tr>
      <tr class="menuContent" >
        <td class="">2</td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
      </tr>
      <tr class="menuContent">
        <td class="">3</td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
      </tr>
      <tr class= "salatContent">
        <td class="">Salat</td>
        <td class="tg-031e" colspan="5"></td>
      </tr>
    </table>
</div>
</body>
</html>

uingtea · Accepted Answer · 2021-02-02 09:10:50Z

3

the sortest way is using newNode.innerHTML

function selectBuilder() {
  var node = document.getElementById('select');
  var newNode = document.createElement('div');
  newNode.innerHTML = '<div class="select"><select><option>--Select--</option><option>Hello 1</option><option>Hello 2</option><option>Hello 3</option><option>Hello 4</option></select><div class="select_arrow"></div></div>';
  node.appendChild(newNode);

answered Feb 2, 2021 at 9:10

uingtea

6,6342 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mateusz · Accepted Answer · 2021-02-02 09:06:56Z

0

var node = document.getElementById('select'); // get your target element
var selectList = document.createElement("select"); //create new select
var option = document.createElement("option"); //create new option
option.value = "value"; //add value to option
option.text = "text"; //add text to option
selectList.appendChild(option); //add option to select
node.appendChild(selectList); //add selectList to you target

You can use for loop to add more options to your select list. Please take a look at this: How to add Drop-Down list (<select>) programmatically?

answered Feb 2, 2021 at 9:06

Mateusz

3281 silver badge11 bronze badges

1 Comment

fdomn-m Over a year ago

It's unclear where OP is getting their HTML string from - we would generally assume that it's an example string so converting to code would not be suitable. If it's not a sample string, then yes this is an alternative method. Keep answer questions, at 50 rep you can ask comments to clarify, eg "is your HTML fixed or is it an example".

fdomn-m · Accepted Answer · 2021-02-02 09:11:27Z

0

The equivalent jquery (as tagged [jquery]) is to replace your selectBuilder content with

function selectBuilder() {
    $("#select").html("<div>" + your_html_string + "</div>")
}

it's not clear if you need the extra <div> or not.

answered Feb 2, 2021 at 9:11

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Comments

fdomn-m · Accepted Answer · 2021-02-02 09:16:46Z

0

An alternative approach would be to use the Jquery templates.

or you can remote load the template if you dont want to bulky your html page.

    <script id="myTemplate" type="text/html">
        <li> ${Attendee} </li>
    </script>
$("#myTemplate").tmpl(myData).appendTo("ul");

edited Feb 2, 2021 at 9:16

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

answered Feb 2, 2021 at 9:14

Sulabh Agarwal

2911 silver badge8 bronze badges

Collectives™ on Stack Overflow

Parsing complete HTML block with JavaScript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related