Title pretty much says it. My current choices are either to show the snippet and have a run button, or to hide it and not have a run button. Sometimes, you're just changing a single line of code but providing a snippet so the reader can see that line in action. In that case, just showing the changed line, with a run button (and the option to see the whole thing in context) would be great.
Example: In this answer, I really just wanted to focus on the one or two lines I was changing. So I used a hidden snippet and just quoted the code I want to highlight, but then the reader has to expand it to run it, which is jarring. (An effect might make it less jarring, but I still want a run button. :-) )
Here's that complete answer, for context:
Why is the pre DOM not getting appended?
Because wrap
creates a copy of the element(s) you give it, it doesn't use the originals. From the docs:
A copy of this structure will be wrapped around each of the elements in the set of matched elements.
You can readily fix it by using t.parent()
instead of container
:
pre.appendTo(t.parent());
var t = $('#t');
var container = $('<div>');
container.css('position', 'relative');
t.wrap(container);
var pre = $('<pre>');
pre.appendTo(t.parent()); // <== Change is here
textarea {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="t" row="1" style="resize:none;"></textarea>
Alternately, use insert the container before the textarea and then use append
:
container.insertBefore(t);
t.appendTo(container);
var t = $('#t');
var container = $('<div>');
container.css('position', 'relative');
container.insertBefore(t); // <== Change is here
t.appendTo(container); // <== and here
var pre = $('<pre>');
pre.appendTo(container);
textarea {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="t" row="1" style="resize:none;"></textarea>