Getting outerHTML code issue

Question

This is my js code:

function myfunction(){
    $("#label_startDate[0]")[0].outerHTML;
}

and this is the html part:

<label id="label_startDate[0]" class="" style="">
    <span id="star_startDate[0]" style="display: none; color: red">*</span>
    <input name="startDate[0]" id="startDate[0]" value="2015-06-02" readonly="" class="forDatePicker hasDatepicker" size="14" onchange="changeEndDate(0); calculateDaysDuration('@[0]', 0); "type="text">
</label>

For the reason that I have a weird format of the id from the label, I cannot get the outerHTML. What should I do ? I cannot change the id label_starDate[0].

Consider using document.getElementById(...) instead. That's effectively what you're using anyway (and it will be hugely faster than the $ selector). — RobG
– RobG, Commented Jun 2, 2015 at 11:41

Satpal · Accepted Answer · 2015-06-02 11:37:11Z

6

Use \\ to escape [] and also use .prop() to access properties

 $("#label_startDate\\[0\\]").prop("outerHTML");

From Docs

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\.

$(function() {
    alert( $("#label_startDate\\[0\\]").prop("outerHTML"))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="label_startDate[0]" class="" style="">
                        <span id="star_startDate[0]" style="display: none; color: red">*</span>
                        <input name="startDate[0]" id="startDate[0]" value="2015-06-02" readonly="" class="forDatePicker hasDatepicker" size="14" onchange="changeEndDate(0); calculateDaysDuration('@[0]', 0); "type="text">  
</label>

edited Jun 2, 2015 at 11:37

answered Jun 2, 2015 at 11:33

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jozsef Naghi Over a year ago

Thx a lot great solution and well explained

Collectives™ on Stack Overflow

Getting outerHTML code issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related