The ins and del elements represent edits to the document.
ins elementSupport in all current engines.
cite — Link to the source of the quotation or more information about the editdatetime — Date and (optionally) time of the changeHTMLModElement.The ins element represents an addition to the document.
The following represents the addition of a single paragraph:
<aside>
<ins>
<p> I like fruit. </p>
</ins>
</aside>As does the following, because everything in the aside element here counts as
phrasing content and therefore there is just one paragraph:
<aside>
<ins>
Apples are <em>tasty</em>.
</ins>
<ins>
So are pears.
</ins>
</aside>ins elements should not cross implied paragraph
boundaries.
The following example represents the addition of two paragraphs, the second of which was
inserted in two parts. The first ins element in this example thus crosses a
paragraph boundary, which is considered poor form.
<aside>
<!-- don't do this -->
<ins datetime="2005-03-16 00:00Z">
<p> I like fruit. </p>
Apples are <em>tasty</em>.
</ins>
<ins datetime="2007-12-19 00:00Z">
So are pears.
</ins>
</aside>Here is a better way of marking this up. It uses more elements, but none of the elements cross implied paragraph boundaries.
<aside>
<ins datetime="2005-03-16 00:00Z">
<p> I like fruit. </p>
</ins>
<ins datetime="2005-03-16 00:00Z">
Apples are <em>tasty</em>.
</ins>
<ins datetime="2007-12-19 00:00Z">
So are pears.
</ins>
</aside>del elementSupport in all current engines.
cite — Link to the source of the quotation or more information about the editdatetime — Date and (optionally) time of the changeHTMLModElement.The del element represents a removal from the document.
del elements should not cross implied paragraph
boundaries.
The following shows a "to do" list where items that have been done are crossed-off with the date and time of their completion.
<h1>To Do</h1>
<ul>
<li>Empty the dishwasher</li>
<li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
<li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
<li>Buy a printer</li>
</ul>ins and del elementsThe cite attribute
may be used to specify the URL of a document that
explains the change. When that document is long, for instance the minutes of a meeting, authors
are encouraged to include a fragment pointing to the
specific part of that document that discusses the change.
If the cite attribute is present, it must be a valid
URL potentially surrounded by spaces that explains the change. To obtain
the corresponding citation link, the value of the attribute must be parsed relative to the element's node document. User agents may
allow users to follow such citation links, but they are primarily intended for private use (e.g.,
by server-side scripts collecting statistics about a site's edits), not for readers.
The datetime
attribute may be used to specify the time and date of the change.
If present, the datetime attribute's value must be a
valid date string with optional time.
User agents must parse the datetime attribute according
to the parse a date or time string algorithm. If that doesn't return a date or a global date and time,
then the modification has no associated timestamp (the value is non-conforming; it is not a
valid date string with optional time). Otherwise, the modification is marked as
having been made at the given date or global date and time. If the given value is a global date and time then user agents should use the associated
time-zone offset information to determine which time zone to present the given datetime in.
This value may be shown to the user, but it is primarily intended for private use.
The ins and del elements must implement the
HTMLModElement interface:
Support in all current engines.
[Exposed=Window]
interface HTMLModElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute USVString cite;
[CEReactions] attribute DOMString dateTime;
};The cite IDL
attribute must reflect the element's cite content
attribute. The dateTime IDL attribute must
reflect the element's datetime content
attribute.
This section is non-normative.
由于 ins 和 del 元素不影响 分段，在一些情况下段落可能是 隐式的
（没有显式的 p 元素），这样 ins 或 del
元素就可以跨越一整个段落和其他非 短语内容 元素，
以及另一个段落的一部分。例如：
<section> <ins> <p> This is a paragraph that was inserted. </p> This is another paragraph whose first sentence was inserted at the same time as the paragraph above. </ins> This is a second sentence, which was there all along. </section>
通过只包含 p 元素的一部分内容，还可以把一个段落的尾部，加一整个段落，再加第三个段落的开始，
包含到同一个 ins 或 del 元素中（但这很费解，也不是最佳实践）：
<section> This is the first paragraph. <ins>This sentence was inserted. <p>This second paragraph was inserted.</p> This sentence was inserted too.</ins> This is the third paragraph in this example. <!-- (don't do this) --> </section>
但是根据 隐式段落 的定义，
不可能用同一个 ins 或 del 元素包含一个段落尾加紧接着的段落开始部分。
你必须使用一个（或两个）p 元素和两个 ins 或 del 元素，
例如：
<section> <p>This is the first paragraph. <del>This sentence was deleted.</del></p> <p><del>This sentence was deleted too.</del> That sentence needed a separate <del> element.</p> </section>
由于上面提到的困惑，强烈建议作者总是把所有段落标记为 p 元素，
而不是让 ins 或 del 元素穿越
隐式段落 的边界。
This section is non-normative.
ol 和 ul 元素的内容模型不允许
ins 和 del 元素作为子节点。
列表总是表示它的所有列表项，包括应该被标记为删除的列表项。
为了表示一项被插入或删除，可以用 ins 或 del
元素包含 li 元素的内容。为了表示一个元素被替换，
一个 li 元素可以有一个或更多的 del 元素，
再加一个或更多的 ins 元素。
在以下示例中，开始为空的列表随着时间的推移添加或删除了项目。 示例中强调了列表中属于“当前”状态的部分。尽管如此，列表项目编号并未考虑编辑。
<h1>Stop-ship bugs</h1> <ol> <li><ins datetime="2008-02-12T15:20Z">Bug 225: Rain detector doesn't work in snow</ins></li> <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228: Water buffer overflows in April</ins></del></li> <li><ins datetime="2008-02-16T13:50Z">Bug 230: Water heater doesn't use renewable fuels</ins></li> <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232: Carbon dioxide emissions detected after startup</ins></del></li> </ol>
下面的示例中，一个开始只包含水果的列表被替换为只包含颜色的列表。
<h1>List of <del>fruits</del><ins>colors</ins></h1> <ul> <li><del>Lime</del><ins>Green</ins></li> <li><del>Apple</del></li> <li>Orange</li> <li><del>Pear</del></li> <li><ins>Teal</ins></li> <li><del>Lemon</del><ins>Yellow</ins></li> <li>Olive</li> <li><ins>Purple</ins></li> </ul>
This section is non-normative.
组成表格模型的元素有着复杂的内容模型要求，不允许使用 ins 和 del 元素，
所以很难表示对图片的编辑。
为了表示整行的添加和移除，可以（分别）用 ins 或 del
元素包含该行的每个单元格的整个内容。
这个表格中有一整行的添加：
<table> <thead> <tr> <th> Game name <th> Game publisher <th> Verdict <tbody> <tr> <td> Diablo 2 <td> Blizzard <td> 8/10 <tr> <td> Portal <td> Valve <td> 10/10 <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins> </table>
这里有一列被移除（移除时间也给出了，还给了一个页面的链接来解释原因）：
<table> <thead> <tr> <th> Game name <th> Game publisher <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del> <tbody> <tr> <td> Diablo 2 <td> Blizzard <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del> <tr> <td> Portal <td> Valve <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del> <tr> <td> Portal 2 <td> Valve <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del> </table>
通常不应该表示更复杂的编辑（例如删除了一个单元格，把后续所有单元格上移或左移）。