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);
}
Account
