Django: How do I prepend

I'm exploring Django and got this particular problem.

How do I prepend &开发者_开发知识库lt;span class="label">Note:</span> inside {{article.content_html|safe}}?

The content of {{article.content_html|safe}} are paragraph blocks, and I just wanna add <span class="label">Note:</span> in the very first paragraph.

Thanks!

Sounds like you want to write a custom tag that uses BeautifulSoup to parse the HTML and inject the fragment.

There's no easy way. You can easily prepend to all articles.

<span class="label">Note:</span>
{{article.content_html|safe}}

If that doesn't help you consider changing the structure of article.content_html so you can manipulate with blocks from django templates, so it should look something like this

{{article.content_header}}
<span class="label">Note:</span>
{{article.content_html}}

If that solution is not feasible to you and you absolutely need to parse and modify the content of article.content_html, write your own custom filter that does that. You can find documentation about writing custom filters here http://docs.djangoproject.com/en/dev/howto/custom-template-tags/#writing-custom-template-filters.

An alternate approach could be to do this with javascript. In jQuery, it would look something like:

var first_p_text = $("p:first").text()
$("p:first").html("<span class="label">Note:</span>" + first_p_text)

Note though that if there are other elements inside your first p, $("p:first").text() will grab the text from those as well - see http://api.jquery.com/text/

Of course, this relies on decent javascript support in the client.

jQuery is the simplest and easiest to implement. You only need one line with the prepend call (documentation):

$('p:first').prepend('<span class="label">Note:</span>');

Explanation: 'p:first' is a jQuery selector similar to the ':first-child' CSS selector. It will select the first paragraph and the prepend call will then insert the span into that selected paragraph.

Note: If there is a paragraph on the page before your content, you may have to surround it with a div:

<div id='ilovesmybbq'>{{article.content_html|safe}}</div>

Then the jQuery call would be:

$('#ilovesmybbq p:first').prepend('<span class="label">Note:</span>');