edit elements content

by narensrinivasans

HTML

<p id="htmlButton">insertHtml</p>
<p id="textButton">insertText</p>
<p id="inputButton">change Value</p>

<h4 id="elem_id_text">Contains some text</h4>
<h4>h4 - <span id="elem_id_text"> contains some text</span></h4>

<input type="text" name="elem_id_input" id="elem_id_input" value="Enter value" />

CSS

p {
    background: whitesmoke;
    border: 1px solid gray;
    cursor: pointer;
    color: grey;
    display: inline-block;
    padding: 4px 12px;
}
p:hover {
    border-color: black;
    color: black;
}
.green, .newlyAdded {
    color: green;
}
.red {
    color: red;
}
.note {
    color: grey;
    font-size: 16px;
    font-style: oblique;
    font-weight: normal;
    line-height: 16px;
    margin: 5px 0;
}

JavaScript

$('#htmlButton').click(function() {
   $("#elem_id_html").html("<span>Elements with text</span>");
});
$('#textButton').click(function() {
   $("#elem_id_text").text("Elements with text");
});
$('#inputButton').click(function() {
    $("#elem_id_input").val("Plase fill this");
});