JSFiddle - React, Tailwind, and code Playground

by Avinash Singh

HTML

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Search Filter</h2>
<div class="page">
<div class="search-container">

</div>
</div>

<script>
var searchContainer = document.querySelector('.search-container');
function addSearchBar()
{
console.log(searchContainer);
var searchInput = <!DOCTYPE html>
<html>
<body>

<h2>JavaScript Search Filter</h2>
<div class="page">
<div class="search-container">

</div>
</div>

<script>
var searchContainer = document.querySelector('.search-container');
function addSearchBar()
{
console.log(searchContainer);
var searchInput = document.createElement('input');
var searchButton = document.createElement('button');
var buttonText = document.createTextNode('Search');
searchInput.placeholder = "Enter text to Search";
searchButton.onclick=SearchFilter();
searchButton.appendChild(buttonText);
searchContainer.appendChild(searchInput);
searchContainer.appendChild(searchButton);

}

function SearchFilter()
{
console.log("Search Started");
}
window.onLoad=addSearchBar();

</script>

</body>
</html>
document.createElement('input');
var searchButton = document.createElement('button');
var buttonText = document.createTextNode('Search');
searchInput.placeholder = "Enter text to Search";
searchButton.onclick=SearchFilter();
searchButton.appendChild(buttonText);
searchContainer.appendChild(searchInput);
searchContainer.appendChild(searchButton);

}

function SearchFilter()
{
console.log("Search Started");
}
window.onLoad=addSearchBar();

</script>

</body>
</html>