JSFiddle - React, Tailwind, and code Playground

by Ajay Shrestha

HTML

<div class="intel">
    <p id="id">1</p>
    <p id="id"><span>2</span></p>
    <p id="id">3</p>
    <div>
        <p id="id">4</p>
    </div>
</div>
<div class="intel">
    <p id="id">5</p>
    <p id="id">6</p>
    <p id="id">7</p>
    <div>
        <p id="id">8</p>
    </div>
</div>

<input type="text" name="asdfsadf" value="Value" data-id="2">

CSS

div.intel{
    background-color:blue;
    padding:10px;
    margin-top:10px;
}
p#id{
    height:30px;
    background-color:green;
    padding:10px;
}

JavaScript

$(function(){
	console.log("HTML",$('div.intel').html());
    console.log("HTML",$('div.intel p').html('<p>2<p>'));
    console.log("text",$('div.intel p').text());
    console.log("text",$('div.intel>p').text('3'));
    console.log("val",$('input').val());
    console.log("val",$('input').val('32424'));
    console.log("prop",$('input').prop('name'));
    console.log("prop",$('input').prop('name','ajay'));
    console.log("prop",$('input').prop('value'));
    console.log("prop",$('input').attr('data-id'));
    console.log("prop",$('input').attr('value'));
});

//html => children
//text => children
//val => attributes
//prop & attr => attributes