JSFiddle - React, Tailwind, and code Playground
HTML
<input id="input" type="text" />
<button id="find">Find messages</button>
<p id="result"></p>
<p>Try this as input: "<div id='wrapper'><div id='messages'>Messages!</div></div>"</p>
CSS
input, button, p {
margin: .5em;
padding: .5em;
}
p#result {
min-height: 1em;
border: 1px solid #ccc;
}
JavaScript
$('#find').click(function() {
// Get the user input:
var user_input = $('#input').val();
// Create DOM node (subtree) from the string (but don't append to the document):
var node = $(user_input);
// Find the messages div:
var messages = node.find('#messages');
var result;
if (messages.length === 0) {
result = "No messages found.";
} else {
result = "Messages found: <br />" + messages.text();
}
$('#result').text(result);
});