You are tasked with creating a piece of HTML dynamically using JavaScript and appending it to a given element using a passed in selector.
HTML and JavaScript Code - You are given the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Increment Counter</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
crossorigin="anonymous"></script>
</head>
<body>
<div id="wrapper">
</div>
<script src="incrementCounter.js"></script>
<script>
window.onload = function(){
increment("#wrapper");
}
</script>
</body>
</html>
Your function will receive a string value representing a selector (for example "#wrapper" or ".root"), all elements created should be appended to the selector.
The HTML you create should contain 4 elements:
- <textarea> with class="counter", value="0" and the disabled attribute.
- <button> with class="btn", id="incrementBtn" and text "Increment".
- <button> with class="btn", id="addBtn" and text "Add".
- Unordered list <ul> with class="results".
When the [Increment] is clicked the value of the textarea should go up by one (if it was 0 it should become 1 e.t.c.). When the [Add] is clicked a new list item (<li>) with text equal to the current value of the textarea should be added to the unordered list.
Example:
Start off by creating the needed elements and parsing the selector, we can do it easily with jQuery.
Adding multiple elements to the DOM can be expensive, instead of repeatedly adding to the DOM we can create a DocumentFragment and add the elements to it instead. When we have built our hierarchy we can append the DocumentFragment to the DOM, which will add all of the fragment’s elements to the specified selector.
The next step is to add values, and attributes to the elements and events to the buttons. The last step is to add our elements to the DOM.
The solution:
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!--<script src="src/jquery-3.2.1.min.js"></script>-->
</head>
<body>
<div id="wrapper">
</div>
<script src="incrementCounter.js"></script>
<script>
window.onload = function () {
increment("#wrapper");
}
</script>
</body>
</html>
JavaScript code with the jQuery inside:
function increment(selector) {
let container = $(selector);
let fragment = document.createDocumentFragment();
let textArea = $('<textarea>');
let incrementBtn = $('<button>Increment</button>');
let addBtn = $('<button>Add</button>');
let list = $('<ul>');
//textarea
textArea.val(0);
textArea.addClass('counter');
textArea.attr('disabled', true);
//buttons
incrementBtn.addClass('btn');
incrementBtn.attr('id', 'incrementBtn');
addBtn.addClass('btn');
addBtn.attr('id', 'addBtn');
//list
list.addClass('results');
//events
$(incrementBtn).on('click', function () {
textArea.val(+textArea.val() + 1)
});
$(addBtn).on('click', function () {
let li = $(`<li>${textArea.val()}</li>`);
li.appendTo(list);
});
textArea.appendTo(fragment);
incrementBtn.appendTo(fragment);
addBtn.appendTo(fragment);
list.appendTo(fragment);
container.append(fragment);
}
