a element inside of article tag gets duplicated 10 times all of them getting the same classes, ids etc

Question

tl;dr; Some javascript that runs in wordpress duplicates my top element all over the html. See image.

Hi

I am really surprised at this bug in wordpress, and its actually pretty easy to replicate. I wanted a

 <a class="something" href="a-link"> ... </a>

to wrap all of my article content so that it would look like this code:

     <article id="post-<?php the_ID(); ?>"  <?php post_class('col-md-4'); ?>>
       <a class="hehe" href="google.com">
    <?php
    if (is_sticky() && is_home() && ! is_paged()) {
        printf( '<span class="sticky-post">%s</span>', __('Featured', 'nisarg'));
    } ?>
    <?php nisarg_featured_image_disaplay(); ?>
    <div class="main-image">
        <?php if( get_field('main_image') ): ?>
            <img class="img-responsive " src="<?php the_field('main_image'); ?>" />
        <?php endif; ?>
    </div>
        <?php if( get_field('vacation_type_image') ): ?>
            <img src="<?php the_field('vacation_type_image');  ?>" class="post-vacation-type" />
        <?php endif; ?>
    <header class="entry-header">
        <div class="post-header">
                <div class="row blog_post_container">
                    <div class="col-sm-12 blog_post_info_container_col">
                        <div class="blog_post_info_container">
                            <div class="blog_post_info_container_margin">
                                <span class="screen-reader-text"><?php the_title();?></span>
                                <?php if( is_single()) : ?>
                                    <h1 class="entry-title blog_post_header"><?php the_title(); ?></h1>
                                <?php else : ?>
                                    <h2 class="blog_post_info entry-title">
                                        <?php the_title(); ?>
                                    </h2>
                                <?php endif; // is_single() ?>
                                <?php if ('post' == get_post_type()) : ?>
                                    <div class="entry-meta">
                                        <h5 class="blog_post_info entry-date"><?php nisarg_posted_on(); ?></h5>
                                    </div><!-- .entry-meta -->
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </header><!-- .entry-header -->
    <div class="entry-summary row">
        <div class="excerpt">
            <?php the_excerpt(); ?>
            <div class="excerpt-footer">
                <div class="facebook-button">
                    <div class="fb-like"
                         data-share="true"
                         data-width="500"
                         data-show-faces="true">
                        <a class="fb-xfbml-parse-ignore"
                           target="_blank"
                           href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div><!-- .entry-summary -->
    <!--<footer class="entry-footer">
        <?php nisarg_entry_footer(); ?>
    </footer> -->
    </a>
</article><!-- #post-## -->

I am using the Nisarg theme, but if i went inside of twentysixteen theme, and put a:

 <a class="something" href="a-link"> ... </a>

inside of that content.php it would have the same effect, it litters the element inside of the article. like this:

If i look in the source code of my web page, i dont see any of these additional A elements, so they're being appended by some javascript. Now that its something that occurs in several themes i think it has something to do with html5shiv... But ive tried to remove that script from the equation, but the problem remains - so im kind of lost. Does anyone know which javascript library that could do something like this?? i have also used grep to look for javascript files that does a.cloneNode but to no prevail.

Twentysixteen, replication of error:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="http://www.google.com" class="hehe">
    <header class="entry-header">
        <?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
            <span class="sticky-post"><?php _e( 'Featured', 'twentysixteen' ); ?></span>
        <?php endif; ?>

        <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
    </header><!-- .entry-header -->

    <?php twentysixteen_excerpt(); ?>

    <?php twentysixteen_post_thumbnail(); ?>

    <div class="entry-content">
        <?php
            /* translators: %s: Name of current post */
            the_content( sprintf(
                __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
                get_the_title()
            ) );

            wp_link_pages( array(
                'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
                'after'       => '</div>',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
                'separator'   => '<span class="screen-reader-text">, </span>',
            ) );
        ?>
    </div><!-- .entry-content -->

    <footer class="entry-footer">
        <?php twentysixteen_entry_meta(); ?>
        <?php
            edit_post_link(
                sprintf(
                    /* translators: %s: Name of current post */
                    __( 'Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
                    get_the_title()
                ),
                '<span class="edit-link">',
                '</span>'
            );
        ?>
    </footer><!-- .entry-footer -->
    </a>
</article><!-- #post-## -->

Resulting html:

so that means, simply adding a a tag right after the article tag in something like content.php will duplicate the a tag inside of all the divs, which just seems insane to me.

Thanks

EDIT 1: adding example of "core" wordpress theme twentysixteen with exact same error.

EDIT 2: I can confirm, a clean installation of Wordpress has this exact problem.

Answer 1

There is another <a> within the <h2> title. It's not possible to nest <a> tags. If you do this, the browser attempts to fix the structure closing the nested <a> and what you see is the result.