.innerHTML += '<element />' vs .appendChild( element )

Benchmark created by ThinkingStiff on October 23, 2011

Preparation HTML

<ul style="display: none;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
    <li>36</li>
    <li>37</li>
    <li>38</li>
    <li>39</li>
    <li>40</li>
    <li>41</li>
    <li>42</li>
    <li>43</li>
    <li>44</li>
    <li>45</li>
    <li>46</li>
    <li>47</li>
    <li>48</li>
    <li>49</li>
    <li>50</li>
    
</ul>

Setup

var ul = document.getElementsByTagName( 'ul' )[0];

Test runner

ul.innerHTML += '<li>after</li>';
 

var li = document.createElement( 'li' );
li.innerHTML = 'after';
ul.appendChild( li );
 

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by ThinkingStiff on October 23, 2011